`), so the
inner one has to fill the cell too or the field sits at its intrinsic width. */
.slg-section--hero .homeform .input > .input {
height: 100%;
}
/* ---- the buttons ----------------------------------------------------------
The prototype's `.btn` is square, letterspaced and uppercase, and its search
submit is `.btn-teal`. The uppercase transform is why the submit's *value*
can stay the legacy lower-case `search` byte while the page reads SEARCH —
see lib/sections/strings.php. */
.slg-section--hero .homeform .btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 13px 26px;
border: 1px solid #fff;
border-radius: 0;
background: none;
color: #fff;
font-size: 12.5px;
font-weight: 600;
letter-spacing: .12em;
text-transform: uppercase;
height: 49px;
transition: .18s;
}
.slg-section--hero .homeform .col-md-5.homebtns .btn {
background: var(--slg-primary, #1aafc1);
border-color: var(--slg-primary, #1aafc1);
white-space: nowrap;
width: 100%;
}
.slg-section--hero .homeform .col-md-5.homebtns .btn:hover {
background: var(--slg-primary-hover, #158fa0);
border-color: var(--slg-primary-hover, #158fa0);
}
.slg-section--hero .homeform .col-md-7.homebtns .btn:hover {
background: #fff;
color: #333;
}
/* The date pickers' panel. `.modal-cal` is `position: absolute` and starts
`display: none`, so as a grid child it takes no cell either way — but an
absolutely-positioned grid child with no placement resolves against the grid
container's padding box, and the legacy `margin-top: -30px` would then hang
it above the strip. Pinned below the strip instead, which is where a date
picker belongs and where the prototype's own field order implies it. */
.slg-section--hero .homeform .modal-cal {
top: 100%;
left: 0;
margin-top: 8px;
}
/* ---- the trust marks and the sourcing line --------------------------------
Rendered only when the strings map resolves them, which is only on a booking
homepage with a live RateHawk integration. On the main site these selectors
match nothing — deliberately, since two of the three marks are on
slg_sections_booking_lexicon(). */
.slg-section--hero .slg-hero-marks {
display: flex;
flex-wrap: wrap;
gap: 34px;
margin-top: 20px;
font-size: 12.5px;
letter-spacing: .09em;
text-transform: uppercase;
font-weight: 600;
color: #fff;
}
.slg-section--hero .slg-hero-marks span {
display: flex;
align-items: center;
gap: 9px;
}
/* Inline SVG, sized in `em` off the parent like the prototype's sprite use, so
the mark and its face scale together. `fill: none` with a stroke is what
makes these line icons rather than solid blobs — the prototype's paths are
drawn, not filled. */
.slg-section--hero .slg-hero-ic {
width: 19px;
height: 19px;
flex: none;
display: block;
fill: none;
stroke: var(--slg-primary, #1aafc1);
stroke-width: 1.4;
stroke-linecap: round;
stroke-linejoin: round;
}
.slg-section--hero .slg-hero-attribution {
margin-top: 14px;
font-size: 12px;
line-height: 1.65;
letter-spacing: .04em;
color: rgba(255, 255, 255, .78);
}
/* ---- responsive -----------------------------------------------------------
The two breakpoints are the prototype's own (1020px and 860px), not this
theme's 991/767 pair. They are the widths at which the reference's hero
reflows, and the acceptance criterion is a match against the reference. */
@media (max-width: 1020px) {
.slg-section--hero .homeform {
grid-template-columns: 1fr 1fr;
}
/* The reference drops its submit to a full-width row here, because four
fields in two columns leaves it nothing to sit beside. This hero has five
fields, so the fifth leaves exactly one free cell and the submit takes it —
three rows of two, which is the same three-row strip the reference reflows
to and the same 179px. A full-width submit would have made it four. */
.slg-section--hero .homeform .col-md-5.homebtns {
grid-column: auto;
}
/* Six cells into two columns is three rows, and the panel has to cover all
three. See the note on the rule itself for why this is a count and not
`1 / -2`. */
.slg-section--hero .homeform:before {
grid-row: 1 / span 3;
}
}
@media (max-width: 860px) {
/* The header sits 5px down and 84px tall below this width, so its bottom edge
is at 89px; the prototype's own narrow gap is 40px. */
.slg-section--hero .block.banner {
padding-top: 129px;
}
.slg-section--hero .slg-hero-marks {
flex-direction: column;
gap: 18px;
}
}
@media (max-width: 768px) {
/* The legacy rules add `padding: 0 15px` to both at this width (lines 937 and
956), on top of the container's own 15px gutter. That halves twice: the
headline measured three lines at 375 where the reference takes two, and the
lede four where the reference takes three — the whole 375 residual, from a
30px measure difference. The container already has the gutter. */
.slg-section--hero h1.homeheader,
.slg-section--hero p.homesubheader {
padding: 0;
}
}
/* Deliberately no third breakpoint. The reference holds two columns all the way
down to 375 — each field is about 167px there — and the acceptance criterion
is a match against the reference, not against this theme's own 767px habit. A
single-column strip measured 552px at 375 where the reference is 179. */
/* M02 hero — the prototype module (P2-23, CHA-395). END
=========================================================================== */
/* `.home`'s banner margin must not reach a section (CHA-319).
Three rules now say some version of "the gap below a section belongs to the
loop, and `.block.banner` already sets `margin-bottom: 0`, so nothing has to be
zeroed here" — the hero rule above, the browse-and-book rule below, and P2-04
through P2-06. All three are wrong on the homepage, for a specificity reason
none of them checked: `.block.banner`'s own `margin-bottom: 0` is (0,2,0) and
`.home .block.banner`'s `margin-bottom: 100px` is (0,3,0), so on `.home` the
page-scoped value wins and every section banner carries a stray 100px that no
spacing control authored.
Measured on the Live variant at 1440x900 with this rule absent: `margin-bottom`
computed to 100px on BOTH the hero and browse_and_book banners, under
`section_spacing: none` on each. That is the gap-paid-twice shape CHA-299 went
after, arriving from a selector rather than from a chrome value.
Only the margin is corrected here. The heights are already right: P2-03 and
P2-08 each restated their legacy ladder against the section class, and those
rules win on source order. The 115vh slab of dark grey in the CHA-272 review
was not this — see the evidence doc; it was the stale `app/` stylesheet, in
which `.slg-section--browse-and-book` does not exist at all and `.home`'s 115vh
is therefore unopposed.
(0,3,0) like the `.home` rule it answers, and later in the file, so it wins on
source order the same way the two height restatements do.
This rule stands, and CHA-350 did not weaken it — but it has a consequence it
did not record. The 100px it stops escaping was load-bearing on the main site:
CHA-299's spacing contract was built on it collapsing with the next section's
50px, so zeroing it here took the assembled homepage's hero boundary from
100px to 50px, which is the whole of Epic D's remaining parity gap. The 100px
is now stated in the loop, at `.slg-section--hero + .slg-section--space-block`
above, where rule 5 says it belongs. Nothing here needs to change to keep the
Live variant's 0px hero -> browse-and-book boundary: that pair is
`--space-none`, so the CHA-350 selector cannot match it. */
.slg-section .block.banner {
margin-bottom: 0;
}
/* CTA columns section (P2-04) — the ported lib/blocks/three_col_content.php.
The block's only rules in this stylesheet that are not typography are its own
vertical margins, and they change at 768px:
>= 768px margin-top: 50px, margin-bottom: 50px (line 661)
<= 767px margin-top: -34px, margin-bottom: 50px (lines 5901 and 5947,
both inside `@media (max-width: 767px)`; the negative one pulls
the block up over whatever precedes it)
Vertical space around a section belongs to the loop (rule 5), so inside a
section both are zeroed at every width and the `spacing` chrome control
provides the gap. Carrying them through would mean the spacing control and a
hard-coded margin fighting each other: pick `normal` on a phone and you get
40px of section padding with the block pulled 34px back up out of it.
Same call P2-03 made on `.home .block.banner`'s `margin-bottom: 100px`, with
one difference: a *top* margin paints, so this one is visible — 50px on
desktop, 34px the other way on mobile.
docs/cha-246-cta-columns-port-parity-evidence.md §2 measures it.
Specificity (0,3,0) beats both `.block` (0,1,0) and `.calltoaction-block.block`
(0,2,0), and this rule is outside any media query, so it wins at every width.
The legacy part outside a section is untouched. */
.slg-section--cta-columns .calltoaction-block.block {
margin-top: 0;
margin-bottom: 0;
}
/* Featured properties section (P2-05) — the merged port of
lib/blocks/feautred_properties.php and lib/blocks/feautred_properties_home.php.
`.featured-block` adds nothing of its own but `.featured-block .property
{ margin-bottom: 20px }` (line 6549), which is the gap between card rows and
stays. What has to go is the `.block` margin it inherits — 50px top and bottom
(line 661, restated with the same values at line 5901 inside
`@media (max-width: 767px)`). Vertical space around a section belongs to the
loop (rule 5) and the `spacing` control provides it; leaving the margin would
mean the two fight, and adjacent blocks collapse their margins to one 50px gap
while section padding does not, so carrying it through would not even reproduce
today's rhythm.
Same treatment, and the same specificity argument, as the two rules above:
(0,3,0) beats `.block` (0,1,0) at every width, and this rule is outside any
media query. The legacy parts outside a section are untouched — nothing here
matches without `.slg-section--featured-properties` above it. */
.slg-section--featured-properties .featured-block.block {
margin-top: 0;
margin-bottom: 0;
}
/* Featured posts section (P2-06) — the ported lib/blocks/feautred_posts_home.php.
Same treatment as the three rules above, and for the same reason: the block
inherits `.block`'s 50px top and bottom margins (line 661, restated with the
same values at line 5901 inside `@media (max-width: 767px)`), and vertical
space around a section belongs to the loop (rule 5). `.feauredblogposts-block`
contributes no margin of its own, so these two declarations are the whole of
what has to go; everything else the block is styled by is untouched.
Note the selector carries the legacy class's **typo** — `feaured`, missing the
`t`. That is deliberate. The stylesheet has rules for both spellings —
`.feauredblogposts-block` at lines 2735, 4808, 5486 and 5994, and
`.featuredblogposts-block` at 1023, 2673, 2677 and 2682 — and the part has
always emitted the typo'd one, so the correctly-spelled rules have never
matched this markup. Correcting the class in the port would silently switch
four rules on: a visual change disguised as a cleanup. It is recorded in
renderers/featured-posts.php and left alone.
Specificity (0,3,0) beats `.block` (0,1,0) at every width, and this rule is
outside any media query. The legacy part outside a section is untouched. */
.slg-section--featured-posts .feauredblogposts-block.block {
margin-top: 0;
margin-bottom: 0;
}
/* Content columns section (P2-20) — the ported inline block from
front-page.php:19-33, the one block on that template that was never a
lib/blocks part.
Same treatment as the three rules above, and the simplest case of it:
`.content-block` contributes no margin of its own at any width, so the whole
of what has to go is `.block`'s 50px top and bottom (line 661, restated with
the same values at line 5901 inside `@media (max-width: 767px)`). There is no
negative-margin case here, unlike `.calltoaction-block`. Vertical space around
a section belongs to the loop (rule 5) and the `spacing` control provides it.
Everything else the block is styled by is typography reached by class —
`.content-block h2` and `.content-block p` at lines 2318/2328/2335, and their
restatements at 4790 and 4794 inside `@media (max-width: 991px)` and at
6108/6114 inside `@media (max-width: 475px)`. None of them is touched, so the
two columns keep their justified text, their 20px paragraph gap and their
centred 920px heading at every width.
Specificity (0,3,0) beats `.block` (0,1,0) at every width, and this rule is
outside any media query. front-page.php's own fallback branch still renders
the block outside a section, and nothing here matches without
`.slg-section--content-columns` above it. */
.slg-section--content-columns .content-block.block {
margin-top: 0;
margin-bottom: 0;
}
/* Browse-and-book section (P2-08) — the ported lib/blocks/browse_and_book.php.
The largest CSS re-scoping in Epic B so far, and the only one where the legacy
part's whole appearance — not just its margins — is page-scoped. Everything
this form looks like on a 404 page comes from two rules it can never match once
it is a placeable section:
.page404 .banner (line 1018, plus 4764 and 5906 responsively)
.page404 .calendar:not(.modal) (line 2986)
The second is the important one: it is what makes the form a 360px translucent
card floated over the banner rather than a full-width block in the flow. The
first gives the banner the height there is something to float over — outside
`.page404`, `.block.banner` is 400px.
Restated below against the section class, exactly as `.slg-section--hero`
restates `.home .block.banner`, so this is the same form in every context the
layout is registered for. Values and specificity are unchanged: both legacy
selectors are (0,3,0) and both rules below are (0,3,0), so where a section and
`.page404` could ever both match they agree — and they cannot, since 404.php
renders no sections.
`.page404 .banner`'s margin-bottom (100px, 50px under 992px, 71px under 768px)
is deliberately not carried over, on the same reasoning P2-03, P2-04, P2-05 and
P2-06 each recorded: vertical space around a section belongs to the loop
(rule 5) and the `spacing` chrome control provides it. `.block.banner` already
sets `margin-bottom: 0`, so nothing has to be zeroed here.
The three heights are the legacy responsive ladder as-is. They stay meaningful
below 992px even though the search card is hidden there by default, because
`hidden-xs hidden-sm` hides the card and the overlay, not the banner — which is
precisely what the legacy part does on a 404 page, and what makes the 375 and
768 parity shots a comparison of two banners rather than two blanks. */
.slg-section--browse-and-book .block.banner {
height: 750px;
background-size: cover;
background-position: center;
}
@media (max-width: 991px) {
.slg-section--browse-and-book .block.banner {
height: 600px;
}
}
@media (max-width: 767px) {
.slg-section--browse-and-book .block.banner {
height: 435px;
}
}
.slg-section--browse-and-book .calendar:not(.modal) {
position: absolute;
right: 10px;
top: 142px;
background: rgba(255, 255, 255, 0.2);
z-index: 2;
width: 360px;
text-align: center;
padding: 23px 15px 18px 15px;
border-radius: 3px;
letter-spacing: 1px;
}
/* The global tablet rule at line 1707 makes every native select white. That is
suitable for transparent hero controls, but this card's Guests select keeps
its white background: below 992px the existing "Guests" placeholder and the
dropdown arrow therefore painted white on white. Scope the desktop colours
back onto this one section so making the Live form available on mobile also
makes every control readable. */
@media (max-width: 991px) {
.slg-section--browse-and-book .calendar:not(.modal) .select select {
color: #333;
}
.slg-section--browse-and-book .calendar:not(.modal) .select .input-box:after {
color: #848484;
}
}
/* `bb_desktop_only = 0` makes the existing form available on a phone. The
desktop position includes `.banner-text .container`'s 20vh offset plus this
card's 142px top offset; at 375px that pushes the card through the bottom of
the 435px band. Keep the optional mobile form within its own photograph and
let its controls use the available width. Placements which retain the
parity-first desktop-only default remain hidden here and are unaffected. */
@media (max-width: 767px) {
.slg-section--browse-and-book .banner-text .container {
margin-top: 0;
}
.slg-section--browse-and-book .calendar:not(.modal) {
top: 24px;
right: 10px;
left: 10px;
width: auto;
}
}
/* The optional intro line has no legacy counterpart — the part has no editor copy
at all — so it is styled here rather than inherited from anywhere. Sized to the
card, and to the white-on-photograph contrast the rest of it already assumes. */
.slg-section--browse-and-book .slg-bb-intro {
margin: 0 0 15px;
font-size: 14px;
line-height: 1.4;
}
/* Gallery section (P2-07) — the ported lib/blocks/_gallery.php.
Two rules, and the second one is not cosmetic.
1. The `.block` margin, as for the three sections above: 50px top and bottom
(line 661, restated with the same values at line 5901 inside
`@media (max-width: 767px)`). Vertical space around a section belongs to the
loop (rule 5) and the `spacing` control provides it. `.gallery-block` is this
port's own wrapper and adds no margin of its own, so these two declarations
are the whole of what has to go. Specificity (0,3,0) beats `.block` (0,1,0)
at every width and this rule is outside any media query.
2. `a.group1.cboxElement { outline: none }` at line 7042 is the only rule in
this stylesheet keyed to the `group1` class, and the port cannot emit that
class — a document-wide literal shared by every gallery on the page is
exactly the defect docs/epic-b-port-js-binding-audit.md Finding 2 describes,
and renderers/gallery.php mints `gallery-
` instead. So the
declaration is restated here against the section, keyed on `.cboxElement` —
the class colorbox itself adds when it binds an anchor — rather than on the
per-instance group name, which by construction is not knowable to a
stylesheet.
Without this the ported lightbox anchors would grow a focus ring the legacy
ones do not have. That is a real visual difference, but only in the focused
state, so a parity screenshot would not show it: the same blind spot that
let the hero ship a dead Enquire button. Line 7042 is left alone — the
legacy part outside a section is untouched.
`.gallery-block` appears nowhere else in this stylesheet, so neither rule can
match anything that existed before this port. */
.slg-section--gallery .gallery-block.block {
margin-top: 0;
margin-bottom: 0;
}
.slg-section--gallery a.cboxElement {
outline: none;
}
/* CHA-251 (P2-09) — the location cluster. Both rules replaced by CHA-297.
`location-card` ports lib/blocks/single_location_block.php, and the thing to
know about that part is that it is **already a loop**: `:1` opens
`while ( have_rows('information_block') )` and `:37` closes it, so one
placement emits **N sibling `.block.location-block.popular-attractions`
divs**, not one. /east-london/docklands/ has six.
`slg_section_location_card_render()` loops the `cards` repeater exactly the
same way (`renderers/location-card.php:241`).
Slice A's two rules here were both written believing a section holds a single
block. Both were wrong for that one reason, and CHA-297 replaces both.
1. The `.block` margin — `margin: 50px 0` (:661, restated at :5901 inside
`@media (max-width: 767px)`). Slice A zeroed it on **every** card, which
closes N cards up against each other with no gap at all. Consecutive
`.location-block` siblings collapse those margins to a single 50px gap, and
that gap *is* the legacy rhythm between cards; only the outer pair belongs
to the loop and its `spacing` control (rule 5). So first-child top and
last-child bottom only, exactly as slot 80 does at the end of this file.
2. `.location-block:nth-child(odd) .locations-box { float: right }` (:2586)
alternates the image side by sibling index. Restated in **both** halves
with the phase inverted, measured on /east-london/docklands/ rather than
reasoned about — see docs/cha-297-location-card-phase-evidence.md §3:
- `header.php` opens `` and emits
`` inside it on both branches (:153, :197),
unconditionally. `locations` is a discriminated union — one row per
page (`templates/location.php:16-31`) — so the run of cards starts at
`nth-child(2)`: even, unfloated, image on the **left**, reading
left/right/left/right/left/right down the page.
- Inside a `
` the first card is `nth-child(1)` — odd, floated
right. `loop.php:192-202` emits nothing between the opening tag and the
body on any branch, so that is unconditional. One extra preceding
sibling, and every card lands on the wrong side.
So even floats right and odd floats **left**: the legacy sequence shifted
back by one.
`float: left` and not `float: none`. Slice A's side-modifier rule stood here
and was `float: none`; it is deleted along with the `image_side` control it
served. The legacy stylesheet has no "left" rule — there, "left"
is the *absence* of :2586 — but the absence of :2586 is not the absence of
a float. `.locations-box` is `col-sm-6` (`location-card.php:179`, legacy
`single_location_block.php:6`) and bootstrap.min.css floats every
`.col-sm-*` left from 768 up, so :2586 is an override of a float and
undoing it must restore that float rather than remove it. `none` takes the
column out of the row's float context and the copy drops below the picture:
measured at 768, the block grew from 225px to 425px while the image x
stayed correct. A side check passes that and so does a height check; only
the text box's own x names it.
No `image_side` control. It was slice A's answer to the same false premise,
and one enum resolved once outside the row loop (slice A's
`location-card.php:239`) cannot express an N-card alternating sequence at
either value — so no setting reproduced the legacy page. Removed on the
board's decision of 2026-09-08, which closed the retention option, and
consistent with district (CHA-292) and location-overview (CHA-251 slice B),
neither of which has one. The modifier class it emitted now appears nowhere in
this stylesheet, and the suite asserts that as a bare string search — so it
cannot come back even in a comment.
Specificity (0,4,0) for both float rules against line 2586's (0,3,0), outside
any media query. Child combinator on all four so a nested `.location-block`
could never be counted in the alternation. The legacy part outside a section
is untouched — nothing here matches without `.slg-section--location-card`
above it. Mirrored by hand into scss/_sections.scss, which is not compiled. */
.slg-section--location-card > .location-block.block:first-child {
margin-top: 0;
}
.slg-section--location-card > .location-block.block:last-child {
margin-bottom: 0;
}
.slg-section--location-card > .location-block:nth-child(even) .locations-box {
float: right;
}
.slg-section--location-card > .location-block:nth-child(odd) .locations-box {
float: left;
}
/* District section (P2-09c) — the ported lib/blocks/district_block.php.
Two concerns, and the second one is the whole reason this block is longer than
the four above it.
1. The `.block` margin, as for every section before this one: 50px top and
bottom (line 661, restated with the same values at line 5901 inside
`@media (max-width: 767px)`). Vertical space around a section belongs to the
loop (rule 5) and the `spacing` control provides it. Only the **outer**
block is zeroed — hence the child combinator. The `popular-attractions`
bands are nested inside it and their margins are the rhythm *within* the
section, which is not the loop's business and must not be flattened.
2. `.location-block:nth-child(odd) .locations-box { float: right }` at line
2586 decides which side the images sit on, and it does it by the block's
index among its siblings. Two things follow from wrapping the block in a
``, and both were measured on staging rather than reasoned about:
- `header.php` opens `` and puts
`` inside it on **both** of its branches
(:153 and :197), unconditionally. So the legacy district block is always
the second child of `.content.about` — always **even**, always
`float: left`. Measured on /locations/central-london/: the featured
`.locations-box` sits at x=150 of 1440.
- Inside a `
` the block is the **first** child — odd — so
without these rules the featured images would flip to the right.
Worse, the rule is a *descendant* selector, so an odd outer block matches
every `.locations-box` beneath it, including the ones inside the
`popular-attractions` bands. Those alternate today off their own indices —
measured on the same page as x=150 then x=720 — and an odd ancestor would
collapse the alternation into two right-hand images.
So both halves are restated against the section class. The band indices are
unchanged by the port: `district_block.php:7` opens a `` it never
closes, so a browser already nests the bands and `.more-locations` inside
the outer block, and this port closes the div around exactly that set. The
bands are children 2 and 3 either way.
Specificity: (0,4,0) for the first float rule and (0,5,0) for the two band
rules, against line 2586's (0,3,0), and all three are outside any media query.
The legacy part outside a section is untouched — nothing here matches without
`.slg-section--district` above it. */
.slg-section--district > .location-block.block {
margin-top: 0;
margin-bottom: 0;
}
.slg-section--district > .location-block > .container .locations-box {
float: left;
}
.slg-section--district .location-block.popular-attractions:nth-child(even) .locations-box {
float: left;
}
.slg-section--district .location-block.popular-attractions:nth-child(odd) .locations-box {
float: right;
}
/* Location overview section (P2-09b) — the ported lib/blocks/location_overview.php.
This is the one layout in the cluster that emits **N sibling blocks into one
wrapper**: `location_overview.php:1` wraps the whole `.block.location-block.
single-location` in `while ( have_rows('district_overview') )`, so a section
holds as many blocks as the area repeater has rows. /locations/ has six.
1. The `.block` margin (line 661), but **not** zeroed outright as for the four
single-block layouts above. Six blocks in one wrapper means the 50px margins
*between* them are the rhythm the legacy page has — consecutive
`.location-block`s collapse them to a single 50px gap — and flattening those
would close the blocks up against each other. Only the outer pair belongs to
the loop (rule 5), so only the first block's top and the last block's bottom
are zeroed. The pairs in between still collapse to 50px, unchanged.
2. `.location-block:nth-child(odd) .locations-box { float: right }` at line 2586,
restated in **both** halves with the phase inverted. Measured on /locations/
at 1440 rather than reasoned about — see
docs/cha-251b-location-overview-parity-evidence.md §3:
- `header.php` opens `
` and emits
`` inside it on both branches (:153, :197),
unconditionally. So legacy's first location block is `nth-child(2)` —
even, unfloated, image on the **left** — and the run reads
left/right/left/right/left/right down the page.
- Inside a `
` the first block is `nth-child(1)` — odd, floated
right. One extra preceding sibling, and every one of the six lands on the
wrong side. Document height and footer y matched to the pixel; the entire
diff was horizontal.
So even floats right and odd floats **left**, which is the legacy sequence
shifted back by one.
`float: left` and not `float: none`, which was measured the hard way. The
legacy stylesheet has no "left" rule — there, "left" is the *absence* of
:2586 — but the absence of :2586 is not the absence of a float. `.locations-
box` is `col-md-6 col-sm-4` (location_overview.php:6) and bootstrap.min.css
floats every `.col-sm-*` and `.col-md-*` left, so :2586 is an override of a
float, and undoing it must restore that float rather than remove it.
`float: none` takes the column out of the row's float context entirely: it
passed the side check and grew the section by **716px** at 768 (footer y
3524 against legacy's 2808). Corrected and re-measured — see §6 of the
evidence document.
That note was left here for CHA-297, because slice A's side-modifier rule
was `float: none` on the same element and the same reasoning applied to it.
CHA-297 has since done it: that rule and the class are gone, and
`location-card` pins its phase the way this block does.
No `image_side` control: one enum for the whole section cannot express a
six-block alternating sequence at either of its values, which was measured
before the control was removed (§4 of the same document). That also removes
the CHA-297 defect shape — a side computed once outside the row loop — rather
than reproducing it.
Specificity (0,4,0) for both float rules against line 2586's (0,3,0), outside any
media query. Child combinator on all four so a nested `.location-block` could
never be counted in the alternation. The legacy part outside a section is
untouched — nothing here matches without `.slg-section--location-overview` above
it. Mirrored by hand into scss/_sections.scss, which is not compiled. */
.slg-section--location-overview > .location-block.block:first-child {
margin-top: 0;
}
.slg-section--location-overview > .location-block.block:last-child {
margin-bottom: 0;
}
.slg-section--location-overview > .location-block:nth-child(even) .locations-box {
float: right;
}
.slg-section--location-overview > .location-block:nth-child(odd) .locations-box {
float: left;
}
/* Flexible grid section (§6 Epic C) */
.slg-flexible-grid-block {
width: 100%;
}
.slg-grid {
display: grid;
grid-template-columns: 1fr; /* 1 column on mobile */
gap: var(--slg-grid-gap, 30px);
width: 100%;
}
/* Responsive grid columns */
@media (min-width: 768px) {
.slg-grid--cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.slg-grid--cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.slg-grid--cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.slg-grid--cols-5 {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.slg-grid--cols-6 {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
}
.slg-grid-cell {
display: flex;
flex-direction: column;
background: transparent;
overflow: hidden;
}
.slg-grid-cell-image-wrapper {
width: 100%;
margin-bottom: 15px;
}
.slg-grid-cell-image {
width: 100%;
height: auto;
object-fit: cover;
display: block;
}
.slg-grid-cell-content {
display: flex;
flex-direction: column;
flex-grow: 1;
}
.slg-grid-cell-heading {
font-size: 20px;
line-height: 1.3;
margin-top: 0;
margin-bottom: 10px;
font-weight: 700;
}
.slg-grid-cell-body {
font-size: 15px;
line-height: 1.6;
margin-bottom: 15px;
}
.slg-grid-cell-btn-wrapper {
margin-top: auto;
}
.slg-grid-cell-btn {
display: inline-block;
}
/* CHA-352 (P2-16) — the call-to-action banner, homepage module M12.
A new section, not a port, so there is no legacy rule to reproduce and none of
the alternation/float archaeology the location cluster above needed. Four
things only:
1. No `.block` class on the wrapper, so no `margin: 50px 0` to zero again
(style.css:661). The loop's `spacing` is the section's only vertical gap,
which is what rule 5 asks for and what the `space-block` enum exists to
recover for the ports that could not have it.
2. Centred text. All ten of the client's closing CTAs are `container center`.
3. The buttons are `.btn`, which is `width: 100%` here, so each sits in its own
`col-sm-6` and the pair is capped and centred rather than spread to the
gutters of a 10-column block. Overriding the Bootstrap row's -15px margins
is deliberate: it insets the buttons to the text's edge instead of the
container's.
4. Stacked below 768px, with the gap between them, because two half-width
buttons at 375px are unreadable.
Colour comes from the shade enum; nothing here sets a background, so the
section's `light` default is what paints. Mirrored by hand into
scss/_sections.scss, which is not compiled.
CHA-417 adds the `--2` / `--3` modifier. The cap has to move with the count
because `.btn` is `width: 100%` and the column is what sizes it: three
`col-sm-4`s inside the two-button 590px cap would be 196px columns, and the
longest label this section ships — `Search Apartments – Live !` — does not fit
one. 885px is 590 ÷ 2 × 3, i.e. the same per-button width the pair has today
with one more of them, so adding the third action changes the size of nothing
that was already on the page. It is inside the 975px `col-md-10` inner at
1440 and is simply not binding at 768, where the inner is 720. */
.slg-cta-banner {
position: relative;
}
.slg-cta-banner__inner {
text-align: center;
}
.slg-cta-banner__inner h2 {
margin-top: 0;
}
/* CHA-417 — the reference's `.rule`, at the numbers M11 already ships it at
(`.slg-faq-rule`, style.css:11045, which measured a width delta of 0 against
the mock). Centred rather than left, which is the one deliberate divergence:
the mock's `.ctaband` is `text-align: center` but does not take the `center`
class, so its own rule falls to `margin: 16px 0` and sits under the left edge
of a centred block. */
.slg-cta-banner__rule {
width: 44px;
height: 2px;
background: var(--slg-primary, #1aafc1);
margin: 16px auto;
}
.slg-cta-banner__actions {
margin: 25px auto 0;
max-width: 590px;
}
.slg-cta-banner__actions--3 {
max-width: 885px;
}
.slg-cta-banner__action {
margin-bottom: 10px;
}
@media (min-width: 768px) {
.slg-cta-banner__action {
margin-bottom: 0;
}
}
/* ---------------------------------------------------------------------------
M01 / M05 / M15 — the RateHawk-only chrome (P2-18, CHA-360)
Every selector below is reachable only from markup that lib/ratehawk-chrome.php
gates, or that the section loop's strings carrier asked for. Nothing here
restyles an existing element, so the standard site is untouched by this block
whether or not the stylesheet ships with it.
Mirrored by hand into scss/_sections.scss, which is not compiled — same
convention as the section rules above.
--------------------------------------------------------------------------- */
/* M01. The Live mark sits beside the wordmark, in the brand teal — the same
var(--slg-primary, #169eae) the .back-blue static fallback uses, so it holds against both the
transparent-over-hero header and the solid scrolled one.
The anchor has to become a flex row for that to happen: `.logo img` is
display:block, so an inline mark after it wraps onto its own line under the
logo instead of sitting next to it. Measured at 1440 before this rule existed
— the mark landed at y=96 against the logo's y=28. `align-items: flex-end`
reproduces the prototype's `.brand{display:flex;align-items:flex-end}` lockup,
which sits the mark on the wordmark's baseline rather than centring it.
Scoped to `.has-livemark`, which header.php emits only on the Live variant, so
the main site's logo anchor keeps the block layout it has today. */
.header .logo a.has-livemark {
display: flex;
align-items: flex-end;
gap: 9px;
}
.header .logo .livemark {
display: inline-block;
padding-bottom: 6px;
font-size: 18px;
font-weight: 600;
font-style: italic;
letter-spacing: 0.05em;
line-height: 1;
white-space: nowrap;
color: var(--slg-primary, #169eae);
}
@media (max-width: 767px) {
.header .logo a.has-livemark {
gap: 7px;
}
.header .logo .livemark {
font-size: 15px;
padding-bottom: 4px;
}
}
/* M15. `p.copy` floats right with a 43px top margin; a second floated paragraph
would sit beside the copyright rather than under it, so this one clears and
drops its own top margin to stack tightly beneath. */
p.copy.copy-attribution {
clear: both;
margin-top: 0;
margin-bottom: 26px;
}
p.copy.copy-attribution b {
color: #fff;
font-weight: 600;
}
/* M05. The price line is a second `.information` row inside the card meta, so it
inherits that block's uppercase 12px treatment; only the amount is lifted. */
.static-card .propertymeta .information.price {
text-transform: none;
margin-top: 6px;
}
.static-card .propertymeta .information.price .currency,
.static-card .propertymeta .information.price .numb {
font-size: 16px;
font-weight: 600;
color: var(--slg-primary, #169eae);
}
/* "Elsewhere in the group" — homepage module M13 (§6 Epic C).
Shape taken from the approved M01–M15 prototype: eyebrow, heading, then a
snapping horizontal rail of cards. Mirrored by hand into
scss/_sections.scss, which is not compiled. */
.slg-group-rail-block {
width: 100%;
}
.slg-group-rail-head {
margin-bottom: 26px;
}
.slg-group-rail-eyebrow {
font-size: 12px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #7c7c7c;
margin-bottom: 6px;
}
.slg-section--shade-dark .slg-group-rail-eyebrow {
color: rgba(255, 255, 255, 0.85);
}
.slg-group-rail-heading {
font-size: 24px;
line-height: 1.25;
margin: 0;
}
/* The rail scrolls and snaps at every width, so a card never has to shrink
below a readable size to make a row fit.
Below 1200px the card is the prototype's fixed 272px and the rail scrolls.
At 1200px and up — Bootstrap's last container step, where .container is
1170px — the cards grow to share the row, so the approved four-card
composition fills the container with no scrollbar. `flex-shrink` stays 0 on
purpose: an editor who adds a fifth and sixth card gets a rail that scrolls,
not six cards squeezed to 141px each. That measurement is why this rule is
written this way; see docs/harnesses/cha-361/. */
.slg-group-rail-track {
display: flex;
gap: 22px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
list-style: none;
margin: 0;
padding: 0 0 10px;
}
.slg-group-rail-item {
flex: 0 0 272px;
max-width: 272px;
scroll-snap-align: start;
}
@media (min-width: 1200px) {
.slg-group-rail-item {
flex: 1 0 232px;
max-width: none;
}
}
.slg-group-rail-card {
display: block;
color: inherit;
}
a.slg-group-rail-card {
text-decoration: none;
}
a.slg-group-rail-card:hover .slg-group-rail-card-heading,
a.slg-group-rail-card:focus .slg-group-rail-card-heading {
color: var(--slg-primary, #1aafc1);
}
/* The 16:10 box is reserved with padding rather than the intrinsic size of the
file. Section assembly rewrites core images to loading="lazy" and main.js
strips width/height, so an unreserved box lands as a layout shift on a real
page (CHA-319); a padded box cannot be stripped that way. */
.slg-group-rail-card-media {
position: relative;
width: 100%;
padding-top: 62.5%;
overflow: hidden;
background-color: #f4f4f4;
margin-bottom: 13px;
}
.slg-section--shade-light .slg-group-rail-card-media {
background-color: #ffffff;
}
.slg-group-rail-card-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.slg-group-rail-card-heading {
font-size: 14px;
letter-spacing: 0.06em;
text-transform: uppercase;
font-weight: 400;
line-height: 1.3;
margin: 0 0 5px;
}
.slg-group-rail-card-body {
font-size: 13.5px;
line-height: 1.65;
color: #7c7c7c;
margin: 0;
}
.slg-section--shade-dark .slg-group-rail-card-body {
color: rgba(255, 255, 255, 0.85);
}
/* end "Elsewhere in the group" — the block above is bounded explicitly so a
section landing after it is not mistaken for part of it (CHA-361 suite). */
/* ---------------------------------------------------------------------------
"Why book with us" — homepage module M03 (§6 Epic C, CHA-383).
One centred header and one ruled six-across icon strip, replacing the generic
flexible-grid output the 9 September independent visual review §4 rejected as
one of three modules "impersonated" by the generic renderer. Every value below
is transcribed from the approved prototype's raw bytes — `curl
https://lsa-home-2026.netlify.app/`, its "M03 reasons" rule block plus the base
tokens it inherits — rather than from a rendering of it.
Prototype Here
.center (M03's header) .slg-benefit-strip-head
.eyebrow .slg-benefit-strip-eyebrow
h2 .slg-benefit-strip-heading
.rule .slg-benefit-strip-rule
.reasons .slg-benefit-strip-grid
.reason .slg-benefit-strip-item
.ring .slg-benefit-strip-ring
svg.ic (inside .ring) .slg-benefit-strip-ic
.reason h4 .slg-benefit-strip-item-heading (an — see the
renderer on why the tag differs and the paint does not)
.reason p .slg-benefit-strip-item-body
FOUR PLACES THIS FIGHTS AN INHERITED DEFAULT, and states a value the prototype
did not have to. These are CHA-386's and CHA-384's, re-derived for this
module's own elements.
0. **`line-height`.** The prototype's body is `line-height: 1.65`;
bootstrap.min.css leaves this theme's at 1.42857143. Nothing in the
reference DECLARES a line-height on the eyebrow, so transcribing only its
*declarations* leaves it short. It states 1.65 below. The headings are the
other half of the same point and go the other way: the prototype's
`h1,h2,h3,h4 { line-height: 1.25 }` IS declared, and this theme's h2 says
1.35, so both headings restate 1.25. An inherited value is part of the
design.
1. `body { letter-spacing: 1px }` (:489). The prototype's body sets none, so
every one of its `letter-spacing` values is measured against 0 and any
element here that does not restate one silently gains a pixel per
character. The section heading and the benefit sentence therefore say
`letter-spacing: 0` where the prototype says nothing, and mean it. The
eyebrow's `.16em` and the item heading's `.08em` are the prototype's own
and replace the 1px outright.
2. `h2 { margin-bottom: 26px; font-size: 30px; letter-spacing: 0.5px;
line-height: 1.35 }` (:543) and `h3 { font-size: 24px; font-weight: 400 }`
(:548). All six are overridden. Unlike M04 the 26px does not move to a
header box — this header has none, and the reference spends the gap on
`.reasons { margin-top: 34px }` instead, which is transcribed as the
grid's own margin so the rule sits 16px under the heading exactly as it
does in the reference.
3. The reference sets `font-weight: 300` on h1–h4. **That weight is not
loadable here**: functions.php:232 enqueues `Open+Sans:400,600`, so a 300
resolves to 400 (or to a synthetic light, per browser) and the declaration
would describe something other than what ships. The section heading is
therefore written as the 400 it will actually render at. The item heading
is unaffected — the reference overrides it to 600, which IS enqueued.
BREAKPOINTS ARE THE PROTOTYPE'S OWN, and for THIS module they are **1020 and
540** — not the 860/540 that M04 and M09 use, and not Bootstrap's 767/991. The
reference steps `.reasons` 6 -> 3 columns at 1020 and 3 -> 1 at 540. That is
what produces the reference's shape at the three acceptance viewports: six
across at 1440, **three across at 768**, one down at 375. Reusing the sibling
modules' 860 would put 768 in the one-column band instead of the three-column
band — the wrong shape at a viewport acceptance is judged at.
THE DIVIDERS ARE A PROPERTY OF THE RUN. The reference draws `border-top` on the
grid and `border-right` on every cell, then switches the border off at the end
of each row — hard-coded as `:last-child` plus `:nth-child(3)`, which is
correct only for its own six reasons at its own two column counts. Here the
count is emitted as a `--cols-N` modifier and the reset is `:nth-child(Nn)`, so
it stays correct at any number of benefits and reduces to exactly the
reference's behaviour at six. Each responsive step RESTATES the 1px border
before applying its own `3n`, because a `--cols-4` strip re-flowed to three
columns would otherwise keep the `4n` reset and blank the divider mid-row.
THE CONTAINER DIVERGES, knowingly and as it does on M04 and M09. The reference
is `.wrap { width: min(1180px, 100% - 40px) }`; here the strip sits in the
theme's Bootstrap `.container`. That is a section-chrome decision made for the
whole of Epic C and not M03's to reopen; it is the one place the measured
geometry is expected to differ, and the harness reports it rather than hiding
it.
Everything is scoped under `.slg-benefit-strip-*`, so nothing here can reach
markup this section did not emit — in particular it does not touch the theme's
own `h3`, or `.slg-hero-ic`, which M02 still uses for the same faces. Mirrored
by hand into scss/_sections.scss, which is not compiled — same convention as
the section rules above.
--------------------------------------------------------------------------- */
.slg-benefit-strip-block {
width: 100%;
}
.slg-benefit-strip-head {
text-align: center;
}
.slg-benefit-strip-eyebrow {
font-size: 12px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #7c7c7c;
font-weight: 600;
line-height: 1.65;
margin: 0 0 11px;
}
.slg-benefit-strip-heading {
font-size: clamp(23px, 2.9vw, 32px);
font-weight: 400;
line-height: 1.25;
letter-spacing: 0;
color: #333333;
margin: 0;
}
.slg-benefit-strip-rule {
width: 44px;
height: 2px;
background: var(--slg-primary, #1aafc1);
margin: 16px auto;
}
.slg-benefit-strip-grid {
display: grid;
border-top: 1px solid #e1e1e1;
margin-top: 34px;
}
/* The column count is emitted by the renderer, derived from the number of
benefits and capped at six. */
.slg-benefit-strip-grid--cols-1 {
grid-template-columns: repeat(1, 1fr);
}
.slg-benefit-strip-grid--cols-2 {
grid-template-columns: repeat(2, 1fr);
}
.slg-benefit-strip-grid--cols-3 {
grid-template-columns: repeat(3, 1fr);
}
.slg-benefit-strip-grid--cols-4 {
grid-template-columns: repeat(4, 1fr);
}
.slg-benefit-strip-grid--cols-5 {
grid-template-columns: repeat(5, 1fr);
}
.slg-benefit-strip-grid--cols-6 {
grid-template-columns: repeat(6, 1fr);
}
.slg-benefit-strip-item {
padding: 26px 15px;
text-align: center;
border-right: 1px solid #e1e1e1;
}
/* The end of each row loses its divider, so the strip is ruled between cells and
not boxed in. `:last-child` alone is the reference's rule and covers only a
full final row; the `Nn` is what keeps a short final row correct. */
.slg-benefit-strip-item:last-child,
.slg-benefit-strip-grid--cols-1 .slg-benefit-strip-item:nth-child(1n),
.slg-benefit-strip-grid--cols-2 .slg-benefit-strip-item:nth-child(2n),
.slg-benefit-strip-grid--cols-3 .slg-benefit-strip-item:nth-child(3n),
.slg-benefit-strip-grid--cols-4 .slg-benefit-strip-item:nth-child(4n),
.slg-benefit-strip-grid--cols-5 .slg-benefit-strip-item:nth-child(5n),
.slg-benefit-strip-grid--cols-6 .slg-benefit-strip-item:nth-child(6n) {
border-right: 0;
}
.slg-benefit-strip-ring {
width: 58px;
height: 58px;
border-radius: 50%;
border: 1px solid var(--slg-primary, #1aafc1);
display: grid;
place-items: center;
margin: 0 auto 15px;
color: var(--slg-primary, #1aafc1);
transition: 0.22s;
}
/* `stroke: currentColor` is what makes the hover below work: the glyph takes its
colour from the ring, so one rule repaints both. An uploaded image could not
do this, which is why the icon is a name and not a media field. */
.slg-benefit-strip-ic {
width: 1em;
height: 1em;
font-size: 25px;
fill: none;
stroke: currentColor;
stroke-width: 1.35;
stroke-linecap: round;
stroke-linejoin: round;
display: block;
flex: none;
}
.slg-benefit-strip-item:hover .slg-benefit-strip-ring {
background: var(--slg-primary, #1aafc1);
color: #ffffff;
}
.slg-benefit-strip-item-heading {
font-size: 13px;
letter-spacing: 0.08em;
text-transform: uppercase;
font-weight: 600;
line-height: 1.25;
color: #333333;
margin: 0 0 7px;
}
.slg-benefit-strip-item-body {
font-size: 15px;
color: #555555;
line-height: 1.55;
letter-spacing: 0;
margin: 0;
}
/* The chrome group offers a dark shade on every section. M03 defaults to white
and the reference never draws it dark, but the control exists, so the values
that would be #333-on-#333 are answered rather than left to chance. */
.slg-section--shade-dark .slg-benefit-strip-heading,
.slg-section--shade-dark .slg-benefit-strip-item-heading {
color: #ffffff;
}
.slg-section--shade-dark .slg-benefit-strip-eyebrow,
.slg-section--shade-dark .slg-benefit-strip-item-body {
color: rgba(255, 255, 255, 0.85);
}
.slg-section--shade-dark .slg-benefit-strip-grid,
.slg-section--shade-dark .slg-benefit-strip-item {
border-color: rgba(255, 255, 255, 0.25);
}
@media (max-width: 1020px) {
.slg-benefit-strip-grid--cols-4,
.slg-benefit-strip-grid--cols-5,
.slg-benefit-strip-grid--cols-6 {
grid-template-columns: repeat(3, 1fr);
}
/* Restated before the 3n below: a --cols-4 strip re-flowed to three columns
still carries its 4n reset, which now falls mid-row. */
.slg-benefit-strip-grid--cols-4 .slg-benefit-strip-item,
.slg-benefit-strip-grid--cols-5 .slg-benefit-strip-item,
.slg-benefit-strip-grid--cols-6 .slg-benefit-strip-item {
border-right: 1px solid #e1e1e1;
}
.slg-benefit-strip-grid--cols-4 .slg-benefit-strip-item:nth-child(3n),
.slg-benefit-strip-grid--cols-5 .slg-benefit-strip-item:nth-child(3n),
.slg-benefit-strip-grid--cols-6 .slg-benefit-strip-item:nth-child(3n),
.slg-benefit-strip-item:last-child {
border-right: 0;
}
.slg-section--shade-dark .slg-benefit-strip-grid--cols-4 .slg-benefit-strip-item,
.slg-section--shade-dark .slg-benefit-strip-grid--cols-5 .slg-benefit-strip-item,
.slg-section--shade-dark .slg-benefit-strip-grid--cols-6 .slg-benefit-strip-item {
border-right-color: rgba(255, 255, 255, 0.25);
}
}
@media (max-width: 540px) {
.slg-benefit-strip-grid--cols-2,
.slg-benefit-strip-grid--cols-3,
.slg-benefit-strip-grid--cols-4,
.slg-benefit-strip-grid--cols-5,
.slg-benefit-strip-grid--cols-6 {
grid-template-columns: 1fr;
}
/* One column: every divider turns from a right border into a bottom one, and
the last cell keeps neither, so the strip ends on the content and not on a
rule.
The descendant `.slg-benefit-strip-grid` is load-bearing and not tidiness.
`max-width: 1020px` is ALSO true at 375, so the three-column band's restated
`1px` border is still in play here; at `.slg-benefit-strip-item` alone this
rule would be one class against that rule's two and would lose, leaving a
right-hand divider down the single-column strip. Two classes and a later
source position is what wins it. */
.slg-benefit-strip-grid .slg-benefit-strip-item {
border-right: 0;
border-bottom: 1px solid #e1e1e1;
}
.slg-benefit-strip-grid .slg-benefit-strip-item:last-child {
border-bottom: 0;
}
.slg-section--shade-dark .slg-benefit-strip-grid .slg-benefit-strip-item {
border-bottom-color: rgba(255, 255, 255, 0.25);
}
}
/* end "Why book with us" — the block above is bounded explicitly so a section
landing after it is not mistaken for part of it (CHA-383 suite). */
/* ---------------------------------------------------------------------------
"Two ways to book" — homepage module M04 (§6 Epic C, CHA-384).
One centred header and one two-panel split, replacing the generic
flexible-grid output the 9 September independent visual review §4 rejected:
*"a large split two-panel booking choice block with the left panel dark, teal
bullets, and prominent buttons"* against *"the right headings/body but with
generic flexible-grid styling"*. Every value below is transcribed from the
approved prototype's raw bytes — `curl -sL https://lsa-home-2026.netlify.app/`,
its "M04 route chooser" rule block plus the base tokens it inherits — rather
than from a rendering of it.
Prototype Here
.center (M04's header) .slg-booking-choice-head
.eyebrow .slg-booking-choice-eyebrow
h2 .slg-booking-choice-heading
.rule .slg-booking-choice-rule
p.muted .slg-booking-choice-lede
.split .slg-booking-choice-split
.pane .slg-booking-choice-panel
.pane.dark .slg-booking-choice-panel--dark
.pane .tag .slg-booking-choice-tag
.pane h3 .slg-booking-choice-panel-heading
.pane p .slg-booking-choice-panel-body
.checks .slg-booking-choice-points
.checks li .slg-booking-choice-point
.btn .slg-booking-choice-btn--secondary
.btn.btn-teal .slg-booking-choice-btn--primary
.btn-white .slg-section--shade-dark …--secondary
FIVE PLACES THIS FIGHTS AN INHERITED DEFAULT, and states a value the
prototype did not have to. The first four are CHA-386's, re-derived for this
module's own elements; the fifth is new here.
0. **`line-height`.** The prototype's body is `line-height: 1.65`;
bootstrap.min.css leaves this theme's at 1.42857143. Nothing in the
reference DECLARES a line-height on the eyebrow, the tag, the lede, the
bullets or the button, so transcribing only its *declarations* leaves
every one of them short — and in this module that compounds, because a
panel's height is the sum of five stacked text blocks. All of them state
1.65 below. An inherited value is part of the design.
1. `body { letter-spacing: 1px }` (:489). The prototype's body sets none, so
every one of its `letter-spacing` values is measured against 0 and any
element here that does not restate one silently gains a pixel per
character. The panel heading, paragraph, lede and bullets therefore say
`letter-spacing: 0` where the prototype says nothing, and mean it.
2. `h2 { margin-bottom: 26px; font-size: 30px; letter-spacing: 0.5px;
line-height: 1.35 }` (:543) and `h3 { font-size: 24px }` (:548). All five
are overridden. The heading's 26px is not deleted, it moves: the
prototype spends the gap below the header on the header BOX
(`margin: 0 auto 32px`), which is what puts the teal rule and the lede
inside the same measure as the heading rather than 26px away from it.
3. `a` is not restyled globally in this stylesheet — the two bare `a` rules
at :2847 and :6106 are `footer#footer .call a` descendant selectors split
across a newline — but `text-decoration` is stated on the button anyway,
since an underlined button is a visible defect and the cost of being
explicit is one line.
4. The reference sets `font-weight: 300` on h1–h4. **That weight is not
loadable here**: functions.php:232 enqueues `Open+Sans:400,600`, so a 300
resolves to 400 (or to a synthetic light, per browser) and the
declaration would describe something other than what ships. Both
headings are therefore written as the 400 they will actually render at.
Closing that gap means changing the site-wide font enqueue, which is a
global decision and not M04's to take.
5. **`max-width: 40em` is written out as 600px.** The reference's header is
`style="max-width:40em"` on a document whose body is 15px, so it measures
600px. `em` here resolves against THIS theme's inherited 14px and would
silently narrow the header to 560px — a 40px difference in the measure of
the one centred paragraph on the module. The transcription is of the
rendered width, and it is stated in the unit that preserves it.
BREAKPOINTS ARE THE PROTOTYPE'S OWN, 860 and 540, not Bootstrap's 767/991.
860 is where the split stacks and the pane divider turns from a left border
into a top one; 540 is where the two-column bullet grid becomes one column.
They are what produce the reference's shape at the three acceptance viewports
— two panels at 1440, one column of two at 768 and at 375, with the bullets
still two-up at 768 and one-up at 375 — and a Bootstrap 767 would put 768 on
the wrong side of the step by a single pixel.
SOURCE ORDER IS LOAD-BEARING in exactly one place. `--dark`'s `border: 0` and
the adjacent-sibling `border-left` have the same specificity (two classes
each), so the later one wins. The reference orders them `.pane + .pane` then
`.pane.dark`, which is what stops a dark panel from ever drawing a divider on
its own edge — including when an editor shades the second panel instead of the
first. That order is preserved below.
Everything is scoped under `.slg-booking-choice-*`, so nothing here can reach
markup this section did not emit — in particular it does not touch the theme's
own `.btn`, which the flexible-grid renderer still uses. Mirrored by hand into
scss/_sections.scss, which is not compiled — same convention as the section
rules above.
--------------------------------------------------------------------------- */
.slg-booking-choice-block {
width: 100%;
}
.slg-booking-choice-head {
max-width: 600px;
margin: 0 auto 32px;
text-align: center;
}
.slg-booking-choice-eyebrow {
font-size: 12px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #7c7c7c;
font-weight: 600;
line-height: 1.65;
margin-bottom: 11px;
}
.slg-section--shade-dark .slg-booking-choice-eyebrow {
color: rgba(255, 255, 255, 0.85);
}
/* The reference does not override the base `h2` for M04, so this is the base
clamp: 32px at 1440, 23px at 768 and at 375. */
.slg-booking-choice-heading {
font-size: 23px;
font-size: clamp(23px, 2.9vw, 32px);
line-height: 1.25;
letter-spacing: 0;
font-weight: 400;
margin: 0;
}
/* 44x2 teal bar, centred under the heading. `.center .rule` in the reference. */
.slg-booking-choice-rule {
width: 44px;
height: 2px;
background-color: var(--slg-primary, #1aafc1);
margin: 16px auto;
}
.slg-booking-choice-lede {
font-size: 15px;
line-height: 1.65;
letter-spacing: 0;
color: #7c7c7c;
margin: 0;
}
.slg-section--shade-dark .slg-booking-choice-lede {
color: rgba(255, 255, 255, 0.8);
}
.slg-booking-choice-split {
display: grid;
border: 1px solid #e1e1e1;
}
/* The column count is carried by a modifier rather than by the base rule,
because a stored row set is not always the authored pair: the ACF repeater
caps at two, but a cap governs what can be authored next, not what is already
stored. A lone panel fills the width instead of sitting in a half-width box
beside an empty one. */
.slg-booking-choice-split--panels-1 {
grid-template-columns: 1fr;
}
.slg-booking-choice-split--panels-2 {
grid-template-columns: 1fr 1fr;
}
.slg-booking-choice-panel {
padding: 38px 34px;
}
/* The plain panel has no band of its own: it shows whatever the section's shade
is, which is what makes the highlighted one read as highlighted. Stated rather
than left to the initial value, because `.slg-booking-choice-panel--dark`
below sets a background and these two are read as a pair. */
.slg-booking-choice-panel--light {
background-color: transparent;
}
.slg-booking-choice-panel + .slg-booking-choice-panel {
border-left: 1px solid #e1e1e1;
}
/* Must stay AFTER the rule above — see the source-order note in the header. */
.slg-booking-choice-panel--dark {
background-color: #333333;
color: #ffffff;
border: 0;
}
.slg-booking-choice-tag {
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
font-weight: 600;
color: #7c7c7c;
line-height: 1.65;
margin-bottom: 12px;
}
.slg-booking-choice-panel--dark .slg-booking-choice-tag {
color: var(--slg-primary, #1aafc1);
}
.slg-booking-choice-panel-heading {
font-size: 23px;
line-height: 1.25;
letter-spacing: 0;
font-weight: 400;
color: inherit;
margin: 0 0 12px;
}
.slg-booking-choice-panel-body {
font-size: 14.5px;
line-height: 1.65;
letter-spacing: 0;
color: #7c7c7c;
margin: 0 0 15px;
}
.slg-booking-choice-panel--dark .slg-booking-choice-panel-body {
color: rgba(255, 255, 255, 0.8);
}
.slg-booking-choice-points {
list-style: none;
padding: 0;
margin: 18px 0 24px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 9px 20px;
font-size: 14px;
line-height: 1.65;
letter-spacing: 0;
}
.slg-booking-choice-point {
position: relative;
padding-left: 20px;
margin: 0;
list-style: none;
color: inherit;
}
/* The teal square marker. 7px at `top: 9px` centres it on a 14px/1.65 line box;
both numbers are the reference's. */
.slg-booking-choice-point::before {
content: "";
position: absolute;
left: 0;
top: 9px;
width: 7px;
height: 7px;
background-color: var(--slg-primary, #1aafc1);
}
.slg-booking-choice-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 13px 26px;
border: 1px solid #333333;
background-color: transparent;
color: #333333;
font-family: inherit;
font-size: 12.5px;
font-weight: 600;
letter-spacing: 0.12em;
line-height: 1.65;
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
transition: background-color 0.18s, border-color 0.18s, color 0.18s;
}
.slg-booking-choice-btn--secondary:hover,
.slg-booking-choice-btn--secondary:focus {
background-color: #333333;
border-color: #333333;
color: #ffffff;
text-decoration: none;
}
.slg-booking-choice-btn--primary {
background-color: var(--slg-primary, #1aafc1);
border-color: var(--slg-primary, #1aafc1);
color: #ffffff;
}
.slg-booking-choice-btn--primary:hover,
.slg-booking-choice-btn--primary:focus {
background-color: var(--slg-primary-hover, #158fa0);
border-color: var(--slg-primary-hover, #158fa0);
color: #ffffff;
text-decoration: none;
}
/* On a dark SECTION shade the secondary button would be #333 on #333, which is
the same invisible combination the shade-derived emphasis exists to prevent
one level down. `.btn-white` is the prototype's own token for it. Written with
two classes so it outranks `.slg-section--shade-dark a` at :7680, which is one
class and one type and would otherwise repaint both buttons on hover. */
.slg-section--shade-dark .slg-booking-choice-btn--secondary {
border-color: #ffffff;
color: #ffffff;
}
.slg-section--shade-dark .slg-booking-choice-btn--secondary:hover,
.slg-section--shade-dark .slg-booking-choice-btn--secondary:focus {
background-color: #ffffff;
border-color: #ffffff;
color: #333333;
}
.slg-section--shade-dark .slg-booking-choice-btn--primary,
.slg-section--shade-dark .slg-booking-choice-btn--primary:hover,
.slg-section--shade-dark .slg-booking-choice-btn--primary:focus {
color: #ffffff;
}
@media (max-width: 860px) {
.slg-booking-choice-split {
grid-template-columns: 1fr;
}
.slg-booking-choice-panel + .slg-booking-choice-panel {
border-left: 0;
border-top: 1px solid #e1e1e1;
}
}
@media (max-width: 540px) {
.slg-booking-choice-points {
grid-template-columns: 1fr;
}
}
@media (prefers-reduced-motion: reduce) {
.slg-booking-choice-btn {
transition: none;
}
}
/* end "Two ways to book" — the block above is bounded explicitly so a section
landing after it is not mistaken for part of it (CHA-361 suite). */
/* ---------------------------------------------------------------------------
"Where people stay" — homepage module M09 (§6 Epic C, CHA-386).
One section header and one four-card grid, replacing the four stacked
`.location-block single-location` bands the 9 September independent visual
review called "structurally wrong". Every value below is transcribed from the
approved prototype's raw bytes — `curl -sL https://lsa-home-2026.netlify.app/`,
its "M09 area tiles" rule block — rather than from a rendering of it.
Prototype Here
.sec-head .slg-area-tiles-head
.sec-head > div .slg-area-tiles-titles
.eyebrow .slg-area-tiles-eyebrow
.sec-head h2 .slg-area-tiles-heading
.link .slg-area-tiles-all
.tiles .slg-area-tiles-grid
.tile .slg-area-tiles-tile
.tile img .slg-area-tiles-image
.tile span .slg-area-tiles-caption
.tile span em .slg-area-tiles-line
FOUR PLACES THIS FIGHTS AN INHERITED DEFAULT, and states a value the
prototype did not have to:
0. **`line-height`.** The prototype's body is `line-height: 1.65` and this
theme's reset leaves the eyebrow, the header link and the caption at 1.
None of the four elements declares a line-height in the reference, so
transcribing only its *declarations* leaves all four short — measured, the
header came out 16px shorter than the reference's at 768 and 375 and 8px
shorter at 1440, and the caption block with it. An inherited value is part
of the design; four `line-height: 1.65`s below are that inheritance,
written out.
1. `body { letter-spacing: 1px }` (:489). The prototype's body sets none, so
every one of its `letter-spacing` values is measured against 0 and any
element here that does not restate one silently gains a pixel per
character. `.slg-area-tiles-line` therefore says `letter-spacing: 0`
where the prototype says it, and means it.
2. `h2 { margin-bottom: 26px; font-size: 30px; letter-spacing: 0.5px;
line-height: 1.35 }` (:543). All four are overridden. The 26px is not
deleted, it moves: the prototype spends it on `.sec-head`'s
`margin-bottom`, which is a gap below the *whole* header rather than
below the heading alone, so the "All locations" link sits on the
heading's baseline instead of 26px above the grid on its own.
3. `a` is not restyled globally in this stylesheet — the two bare `a` rules
at :2847 and :6106 are `footer#footer .call a` descendant selectors split
across a newline — but `text-decoration` is stated on both anchors anyway,
since a card whose caption is underlined is a visible defect and the cost
of being explicit is one line.
4. The reference sets `font-weight: 300` on h1–h4. **That weight is not
loadable here**: functions.php:232 enqueues `Open+Sans:400,600`, so a 300
resolves to 400 (or to a synthetic light, per browser) and the declaration
would describe something other than what ships. The heading is therefore
written as the 400 it will actually render at. Closing that gap means
changing the site-wide font enqueue, which is a global decision and not
M09's to take — recorded here rather than left as an unexplained
divergence.
BREAKPOINTS ARE THE PROTOTYPE'S OWN, 860 and 540, not Bootstrap's 767/991.
They are what produce the reference's column counts at the three acceptance
viewports — four at 1440, two at 768, one at 375 — and a Bootstrap 767 would
put 768 on the wrong side of the step by a single pixel.
The 3:4 box is reserved with `padding-top`, not with `aspect-ratio` on the
image and not with the file's intrinsic size. Section assembly rewrites core
images to `loading="lazy"` and main.js strips width/height, so an unreserved
box lands as a layout shift on a real page (CHA-319); a padded box cannot be
stripped that way. Same decision as M13's rail.
Everything is scoped under `.slg-area-tiles-*`, so nothing here can reach
markup this section did not emit. Mirrored by hand into scss/_sections.scss,
which is not compiled — same convention as the section rules above.
--------------------------------------------------------------------------- */
.slg-area-tiles-block {
width: 100%;
}
/* `align-items: flex-end` is what sits the link on the heading's baseline rather
than centring it against the two-line title stack. */
.slg-area-tiles-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 22px;
margin-bottom: 26px;
}
/* The prototype's `.sec-head` wraps its eyebrow and heading in a bare .
`min-width: 0` is the part that div gets for free and a flex item does not: it
lets a long heading wrap rather than refuse to shrink and push the link out of
the container. */
.slg-area-tiles-titles {
min-width: 0;
}
.slg-area-tiles-eyebrow {
font-size: 12px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #7c7c7c;
font-weight: 600;
line-height: 1.65;
margin-bottom: 11px;
}
.slg-section--shade-dark .slg-area-tiles-eyebrow {
color: rgba(255, 255, 255, 0.85);
}
.slg-area-tiles-heading {
font-size: 24px;
line-height: 1.25;
letter-spacing: 0;
font-weight: 400;
margin: 0;
}
.slg-area-tiles-all {
flex: 0 0 auto;
font-size: 12px;
letter-spacing: 0.12em;
text-transform: uppercase;
font-weight: 600;
color: #7c7c7c;
border-bottom: 1px solid #e1e1e1;
padding-bottom: 3px;
line-height: 1.65;
text-decoration: none;
white-space: nowrap;
}
.slg-area-tiles-all:hover,
.slg-area-tiles-all:focus {
color: var(--slg-primary, #1aafc1);
border-color: var(--slg-primary, #1aafc1);
text-decoration: none;
}
.slg-section--shade-dark .slg-area-tiles-all {
color: rgba(255, 255, 255, 0.85);
border-bottom-color: rgba(255, 255, 255, 0.35);
}
.slg-area-tiles-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.slg-area-tiles-tile {
position: relative;
display: block;
width: 100%;
padding-top: 133.3333%;
overflow: hidden;
background-color: #f6f6f6;
text-decoration: none;
color: inherit;
}
.slg-area-tiles-tile:hover,
.slg-area-tiles-tile:focus {
text-decoration: none;
color: inherit;
}
.slg-area-tiles-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.4s;
}
.slg-area-tiles-tile:hover .slg-area-tiles-image,
.slg-area-tiles-tile:focus .slg-area-tiles-image {
transform: scale(1.05);
}
.slg-area-tiles-caption {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 18px;
color: #fff;
background: linear-gradient(transparent, rgba(0, 0, 0, 0.72));
font-size: 15px;
letter-spacing: 0.06em;
text-transform: uppercase;
font-weight: 600;
line-height: 1.65;
}
.slg-area-tiles-name {
display: block;
font-weight: 600;
}
.slg-area-tiles-line {
display: block;
font-style: normal;
font-size: 12.5px;
text-transform: none;
letter-spacing: 0;
font-weight: 400;
line-height: 1.65;
opacity: 0.86;
margin-top: 4px;
}
@media (max-width: 860px) {
.slg-area-tiles-head {
display: block;
}
.slg-area-tiles-all {
display: inline-block;
margin-top: 14px;
}
.slg-area-tiles-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 540px) {
.slg-area-tiles-grid {
grid-template-columns: 1fr;
}
}
@media (prefers-reduced-motion: reduce) {
.slg-area-tiles-image {
transition: none;
}
.slg-area-tiles-tile:hover .slg-area-tiles-image,
.slg-area-tiles-tile:focus .slg-area-tiles-image {
transform: none;
}
}
/* end "Where people stay" — the block above is bounded explicitly so a section
landing after it is not mistaken for part of it (CHA-386 suite). */
/* ---------------------------------------------------------------------------
"How it works" — homepage module M06 (§6 Epic C, CHA-385).
One centred header and one ruled three-across numbered strip, replacing the
generic flexible-grid output the 9 September independent visual review §4
rejected: *"the reference is a carefully spaced three-step horizontal strip
with square dark number blocks and dividers; local live is a compact generic
text row."* Every value below is transcribed from the approved prototype's raw
bytes — `curl https://lsa-home-2026.netlify.app/`, its "M06 how it works" rule
block plus the base tokens it inherits — rather than from a rendering of it.
Prototype Here
.center (M06's header) .slg-how-it-works-head
.eyebrow .slg-how-it-works-eyebrow
h2 .slg-how-it-works-heading
.rule .slg-how-it-works-rule
.steps .slg-how-it-works-steps
.step .slg-how-it-works-step
.stepnum .slg-how-it-works-stepnum
(the step's unnamed div) .slg-how-it-works-step-text
.step h4 .slg-how-it-works-step-heading (an
— see the
renderer on why the tag differs and the paint does not)
.step p .slg-how-it-works-step-body
THIS IS NOT M03 WITH THREE CELLS, and four of the values below are the places
the two modules genuinely differ. Copying the sibling block would have been
wrong at every one of them:
- `.reasons` has `border-top: 1px solid var(--line)`; **`.steps` has none.**
M06's strip is ruled BETWEEN its cells and is not closed at the top.
- the gap under the header is `margin-top: 30px`, not M03's 34px.
- the item heading's tracking is **`.09em`**, not M03's `.08em`.
- `.reason p` DECLARES `line-height: 1.55`; `.step p` declares none and
inherits the prototype's body 1.65, which is restated below (see 0).
- a `.reason` is centred; a `.step` is a two-column grid and reads left.
FOUR PLACES THIS FIGHTS AN INHERITED DEFAULT, and states a value the prototype
did not have to. These are CHA-383's, CHA-384's and CHA-386's, re-derived for
this module's own elements.
0. **`line-height`.** The prototype's body is `line-height: 1.65`;
bootstrap.min.css leaves this theme's at 1.42857143. Nothing in the
reference DECLARES a line-height on the eyebrow or on `.step p`, so
transcribing only its *declarations* leaves both short. Both state 1.65
below. The headings are the other half of the same point and go the other
way: the prototype's `h1,h2,h3,h4 { line-height: 1.25 }` IS declared, and
this theme's h2 says 1.35, so both headings restate 1.25. An inherited
value is part of the design.
`.slg-how-it-works-stepnum` is the one element here that does NOT restate
it, and the omission is deliberate rather than missed: the block is a fixed
50x50 grid with `place-items: center`, so the numeral is centred on the
box's own midpoint and the line box's height changes nothing about where it
lands. Adding a declaration that cannot move anything would be noise in a
file whose whole claim is that each line was transcribed for a reason.
1. `body { letter-spacing: 1px }` (:489). The prototype's body sets none, so
every one of its `letter-spacing` values is measured against 0 and any
element here that does not restate one silently gains a pixel per
character. The section heading, the step sentence AND the numeral therefore
say `letter-spacing: 0` where the prototype says nothing, and mean it. The
numeral is a single character, so the 1px would land as trailing space and
push it half a pixel off centre inside its square — small, and exactly the
kind of thing a screenshot comparison reports as "the number is not
centred". The eyebrow's `.16em` and the step heading's `.09em` are the
prototype's own and replace the 1px outright.
2. `h2 { margin-bottom: 26px; font-size: 30px; letter-spacing: 0.5px;
line-height: 1.35 }` (:543) and `h3 { font-size: 24px; font-weight: 400 }`
(:548). All six are overridden. As on M03 the 26px does not move to a
header box — this header has none, and the reference spends the gap on
`.steps { margin-top: 30px }` instead, which is transcribed as the strip's
own margin so the rule sits 16px under the heading exactly as it does in
the reference.
3. The reference sets `font-weight: 300` on h1–h4 and on `.stepnum`. **That
weight is not loadable here**: functions.php:232 enqueues
`Open+Sans:400,600`, so a 300 resolves to 400 (or to a synthetic light, per
browser) and the declaration would describe something other than what
ships. The section heading and the numeral are therefore written as the 400
they will actually render at, and this is a KNOWN DIVERGENCE rather than a
transcription: the prototype loads `Open+Sans:wght@300;400;600;700`, so its
own numeral really is drawn at 300 and ours is not. The measurement harness
reports the pair rather than hiding it. The step heading is unaffected —
the reference overrides it to 600, which IS enqueued.
THE BREAKPOINT IS THE PROTOTYPE'S OWN, and for THIS module it is a single step
at **860** — not M03's 1020/540, and not Bootstrap's 767/991. The reference
steps `.steps` 3 -> 1 columns at 860 and has no second rule for it at 540. That
produces the reference's shape at the three acceptance viewports: three across
at 1440, **one down at 768**, one down at 375.
This is the opposite of M03 and it is the one place copying the sibling module
would have been wrong in the visible direction: M03 needed 1020 precisely so
that 768 stayed THREE across, and reusing that number here would have left M06
three across at 768 where the reference has already stacked it.
THE DIVIDERS ARE A PROPERTY OF THE RUN. The reference draws `border-right` on
every cell and switches it off at the end of the row — hard-coded as
`:last-child`, which is correct only because its own three steps are exactly one
row. Here the count is emitted as a `--cols-N` modifier and the reset is
`:nth-child(Nn)` as well, so a fourth step arriving by import or hand-edit wraps
and still loses the divider at the true row end. At three it reduces to exactly
the reference's behaviour.
THE DARK SHADE IS A REAL QUESTION ON THIS MODULE, not boilerplate. The number
block's fill is the prototype's `--band`, which is `#333333` — the same colour
as this theme's dark section shade. Left alone, a dark-shaded M06 would paint
three invisible squares. So on dark the block inverts rather than being
re-tinted, which is the only answer that keeps a 50x50 numbered square looking
like one.
THE CONTAINER DIVERGES, knowingly and as it does on M03, M04 and M09. The
reference is `.wrap { width: min(1180px, 100% - 40px) }`; here the strip sits in
the theme's Bootstrap `.container`. That is a section-chrome decision made for
the whole of Epic C and not M06's to reopen; it is the one place the measured
geometry is expected to differ, and the harness reports it rather than hiding
it.
Everything is scoped under `.slg-how-it-works-*`, so nothing here can reach
markup this section did not emit. Mirrored by hand into scss/_sections.scss,
which is not compiled — same convention as the section rules above.
--------------------------------------------------------------------------- */
.slg-how-it-works-block {
width: 100%;
}
.slg-how-it-works-head {
text-align: center;
}
.slg-how-it-works-eyebrow {
font-size: 12px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #7c7c7c;
font-weight: 600;
line-height: 1.65;
margin: 0 0 11px;
}
.slg-how-it-works-heading {
font-size: clamp(23px, 2.9vw, 32px);
font-weight: 400;
line-height: 1.25;
letter-spacing: 0;
color: #333333;
margin: 0;
}
.slg-how-it-works-rule {
width: 44px;
height: 2px;
background: var(--slg-primary, #1aafc1);
margin: 16px auto;
}
/* `gap: 0` is transcribed and is load-bearing: the dividers are cell borders, and
a gap would open a channel between each border and its neighbour, which reads as
two hairlines rather than one rule. No `border-top` — `.steps` is not closed at
the top the way `.reasons` is. */
.slg-how-it-works-steps {
display: grid;
gap: 0;
margin-top: 30px;
}
/* The column count is emitted by the renderer, derived from the steps that
survived rule 9 and capped at three. */
.slg-how-it-works-steps--cols-1 {
grid-template-columns: repeat(1, 1fr);
}
.slg-how-it-works-steps--cols-2 {
grid-template-columns: repeat(2, 1fr);
}
.slg-how-it-works-steps--cols-3 {
grid-template-columns: repeat(3, 1fr);
}
/* The two-column cell: a fixed 54px track for a 50px block — the reference's own
4px of slack — and `align-items: start` so the number sits level with the first
line of the label rather than centring against a taller sentence. */
.slg-how-it-works-step {
display: grid;
grid-template-columns: 54px 1fr;
gap: 16px;
padding: 14px 26px;
border-right: 1px solid #e1e1e1;
align-items: start;
}
/* The end of each row loses its divider. `:last-child` alone is the reference's
rule and is complete for its own three-in-one-row; the `Nn` is what keeps a
wrapped fourth step correct. */
.slg-how-it-works-step:last-child,
.slg-how-it-works-steps--cols-1 .slg-how-it-works-step:nth-child(1n),
.slg-how-it-works-steps--cols-2 .slg-how-it-works-step:nth-child(2n),
.slg-how-it-works-steps--cols-3 .slg-how-it-works-step:nth-child(3n) {
border-right: 0;
}
/* The square dark number block the review named. Square is the absence of a
radius and is stated: this theme rounds several of its own boxes, and a
`border-radius` arriving from anywhere would turn the defining element of the
module into a lozenge. */
.slg-how-it-works-stepnum {
width: 50px;
height: 50px;
display: grid;
place-items: center;
background: #333333;
color: #ffffff;
font-size: 20px;
font-weight: 400;
letter-spacing: 0;
border-radius: 0;
}
.slg-how-it-works-step-heading {
font-size: 13px;
letter-spacing: 0.09em;
text-transform: uppercase;
font-weight: 600;
line-height: 1.25;
color: #333333;
margin: 0 0 6px;
}
.slg-how-it-works-step-body {
font-size: 14px;
color: #7c7c7c;
line-height: 1.65;
letter-spacing: 0;
margin: 0;
}
/* The chrome group offers a dark shade on every section. M06 defaults to `light`
— the reference's `.soft` band — and the reference never draws it dark, but the
control exists. The number block is the one that has to INVERT rather than
re-tint: its fill is the prototype's `--band`, which is the same #333333 this
theme paints a dark section in, so left alone it would disappear entirely. */
.slg-section--shade-dark .slg-how-it-works-heading,
.slg-section--shade-dark .slg-how-it-works-step-heading {
color: #ffffff;
}
.slg-section--shade-dark .slg-how-it-works-eyebrow,
.slg-section--shade-dark .slg-how-it-works-step-body {
color: rgba(255, 255, 255, 0.85);
}
.slg-section--shade-dark .slg-how-it-works-step {
border-color: rgba(255, 255, 255, 0.25);
}
.slg-section--shade-dark .slg-how-it-works-stepnum {
background: #ffffff;
color: #333333;
}
@media (max-width: 860px) {
.slg-how-it-works-steps--cols-2,
.slg-how-it-works-steps--cols-3 {
grid-template-columns: 1fr;
}
/* One column: every divider turns from a right border into a bottom one, and
the last cell keeps neither, so the strip ends on the content and not on a
rule.
Written with two classes although one would win on source order alone. M06
has a single responsive band, so there is no second band to be outranked by —
but that is exactly the assumption that failed on M03, where `max-width:
1020px` was also true at 375 and a one-class rule lost to it, leaving a
divider down the single-column strip. Stating the specificity here means a
future second band cannot reintroduce that silently. */
.slg-how-it-works-steps .slg-how-it-works-step {
border-right: 0;
border-bottom: 1px solid #e1e1e1;
}
.slg-how-it-works-steps .slg-how-it-works-step:last-child {
border-bottom: 0;
}
.slg-section--shade-dark .slg-how-it-works-steps .slg-how-it-works-step {
border-bottom-color: rgba(255, 255, 255, 0.25);
}
}
/* end "How it works" — the block above is bounded explicitly so a section
landing after it is not mistaken for part of it (CHA-385 suite). */
/* ---------------------------------------------------------------------------
Media and text — homepage module M08 (P2-17, CHA-353).
A new section, so there is no legacy rule to restate here and no parity target
to hit: these rules are the whole of its appearance. Everything is scoped under
`.slg-media-text`, and the two float rules additionally under
`.slg-section--media-and-text`, so nothing on this page can match without the
section having rendered it.
THE FLOAT PAIR, AND WHY IT IS INSIDE A MEDIA QUERY.
`image_side` is expressed as a float on the media column, and BOTH values are
stated positively — `left` and `right`. Neither is `float: none`. In this
stylesheet "image on the left" is Bootstrap's `.col-sm-*` float, not the
absence of a float, so `none` would take the column out of the row's float
context and drop the text below the image with half the row empty beside it —
716px of extra height when it was measured on /locations/ (CHA-251b §6), and
invisible to an image-x check because `none` leaves the image at exactly the
right x.
`css/style.css:2586` cannot reach this markup at all: it needs `.location-block`
and `.locations-box`, and this section emits neither. It is also a single block
rather than a run of siblings, so there is no alternation for the section
wrapper to phase-invert — which is the reason this layout can carry an
`image_side` enum where `location_overview` and `location_card` cannot.
The media query is a deliberate divergence from the district and location-card
rules, which are correctly unscoped. Theirs override a Bootstrap float on an
element that carries a width at mobile; mine does not. `.col-sm-6` declares its
float AND its width only inside `@media (min-width: 768px)`, so an unscoped
float here would meet a widthless block below 768px and shrink-to-fit it onto
the image's intrinsic width instead of stacking it full-bleed. Scoping the pair
to exactly the range in which `.col-sm-6`'s own float exists makes the two
values indistinguishable below 768px by construction rather than by accident.
Specificity: the float rules are (0,3,0) against `.col-sm-6`'s (0,1,0), so they
win without `!important`, and they compete with nothing else in this file.
Verified by measurement, not by inspection — docs/cha-353-media-and-text-evidence.md
records the geometry at 1440, 768 and 375 for both values, comparing the media
and text boxes' `y` (side-by-side) and the block height, because an image-x
readout cannot tell a correct float from a broken one. Mirrored by hand into
scss/_sections.scss, which is not compiled. */
.slg-media-text .slg-media-text__image {
display: block;
width: 100%;
height: auto;
}
.slg-media-text .slg-media-text__media {
margin-bottom: 20px;
}
.slg-media-text .slg-media-text__heading {
margin-top: 0;
}
.slg-media-text .slg-media-text__copy p:last-child {
margin-bottom: 0;
}
.slg-media-text .slg-media-text__cta {
display: inline-block;
margin-top: 20px;
padding: 10px 22px;
background-color: var(--slg-primary, #33aec0);
color: #ffffff;
font-size: 14px;
font-weight: 600;
text-decoration: none;
}
.slg-media-text .slg-media-text__cta:hover,
.slg-media-text .slg-media-text__cta:focus {
background-color: var(--slg-primary, #169eae);
color: #ffffff;
text-decoration: none;
}
@media (min-width: 768px) {
.slg-media-text .slg-media-text__media {
margin-bottom: 0;
}
.slg-section--media-and-text .slg-media-text--media-left .slg-media-text__media {
float: left;
}
.slg-section--media-and-text .slg-media-text--media-right .slg-media-text__media {
float: right;
}
}
/* FAQ accordion section (§6 Epic C, P2-13 — F4)
---------------------------------------------------------------------------
The accordion itself is the theme's existing `.acc` component and is not
restyled here; only the things that component leaves to its container are.
`.acc` has no vertical margin of its own. Everything it has on a location
page comes from `.popular-attractions .acc` (style.css:3511), and everything
it has in the search sidebar comes from `.search-block .acc` (style.css:3521)
— both container-scoped. A bare `.acc` outside those two containers stacks
flush against the next one with nothing between them, so the separator below
is not decoration, it is the thing that makes forty questions legible.
Scoped to `.slg-section--faq` so nothing here can reach the location or
search accordions, which are already spaced by their own containers. */
.slg-section--faq .slg-faq-block {
width: 100%;
}
.slg-section--faq .slg-faq-heading {
margin-top: 0;
margin-bottom: 24px;
}
.slg-section--faq .acc {
border-bottom: solid 1px #e5e5e5;
margin-bottom: 18px;
padding-bottom: 18px;
}
/* The global rule is `.acc:last-child { margin: 0 }` (style.css:3516), which
drops the margin but keeps the padding and the rule — so the last question in
a group would still draw a line under itself and sit hard against the next
section's chrome. */
.slg-section--faq .acc:last-child {
border-bottom: 0;
padding-bottom: 0;
}
.slg-section--faq .acc-title {
font-size: 16px;
line-height: 1.4;
}
.slg-section--faq .acc-title > span {
font-size: 16px;
display: inline-block;
}
.slg-section--faq .acc-content {
padding-top: 12px;
}
.slg-section--faq .acc-content p:last-child {
margin-bottom: 0;
}
/* Legal / long-form page treatment (§6 Epic C, P2-13)
---------------------------------------------------------------------------
A legal document is one long measure of body copy, so the constraint that
matters is line length, not decoration. */
.slg-section--legal-content .slg-legal-block {
width: 100%;
}
.slg-section--legal-content .slg-legal-heading {
margin-top: 0;
margin-bottom: 20px;
}
.slg-section--legal-content .slg-legal-intro {
margin-bottom: 34px;
}
.slg-section--legal-content .slg-legal-contents {
border-top: solid 1px #e5e5e5;
border-bottom: solid 1px #e5e5e5;
padding: 24px 0;
margin-bottom: 40px;
}
.slg-section--legal-content .slg-legal-contents-heading {
margin-top: 0;
margin-bottom: 16px;
font-size: 16px;
letter-spacing: 1px;
text-transform: uppercase;
}
.slg-section--legal-content .slg-legal-contents-list {
list-style: none;
margin: 0;
padding: 0;
}
.slg-section--legal-content .slg-legal-contents-list li {
margin-bottom: 8px;
line-height: 1.4;
}
.slg-section--legal-content .slg-legal-contents-list li:last-child {
margin-bottom: 0;
}
/* Two columns from tablet up. Twenty-one clauses in one column is a screenful
of links before the document starts. */
@media (min-width: 768px) {
.slg-section--legal-content .slg-legal-contents-list {
column-count: 2;
column-gap: 40px;
}
.slg-section--legal-content .slg-legal-contents-list li {
break-inside: avoid;
-webkit-column-break-inside: avoid;
}
}
/* `#header.sticky` is `position: fixed` (style.css:404). Without a scroll
margin every jump link lands with its clause heading underneath the header
that just re-appeared, so the reader arrives mid-clause with no idea which
one they are in. The value is the sticky header's height plus a line. */
.slg-section--legal-content .slg-legal-clause {
scroll-margin-top: 110px;
margin-bottom: 34px;
}
@media (max-width: 767px) {
.slg-section--legal-content .slg-legal-clause {
scroll-margin-top: 80px;
}
}
.slg-section--legal-content .slg-legal-clause:last-child {
margin-bottom: 0;
}
.slg-section--legal-content .slg-legal-clause-heading {
margin-top: 0;
margin-bottom: 14px;
}
.slg-section--legal-content .slg-legal-clause-body p:last-child {
margin-bottom: 0;
}
/* ---------------------------------------------------------------------------
M05 property grid — the homepage card format (§5 Epic C, CHA-387).
The 9 September independent visual review rejected CHA-18 on this module:
> Reference live shows exactly three featured cards in one row, large
> images, no heart icons, title/facility line, teal live price
> (`from £148 per night`), and `View details`. Local live shows six legacy
> cards in a 3x2 grid with shortlist hearts, category badges […]
Every value below is transcribed from the approved prototype's raw bytes —
`curl -sL https://lsa-home-2026.netlify.app/`, its "M05 property grid" rule
block and the four base rules that block leans on — rather than from a
rendering of it.
Prototype Here
.sec-head .slg-property-grid-head
.sec-head > div .slg-property-grid-titles
.eyebrow .slg-property-grid-eyebrow
.sec-head h2 .slg-property-grid-heading
.sec-head .link .slg-property-grid-all
.pgrid .slg-property-grid
.prop .slg-property-card
.prop .img .slg-property-card-figure
.prop .img img .slg-property-card-image
.badge .slg-property-card-badge
.prop h4 .slg-property-card-title
.prop .meta .slg-property-card-meta
.prop .foot .slg-property-card-foot
.price .slg-property-card-price
.foot .link .slg-property-card-link
NOTHING HERE TOUCHES `.property`, `.static-card` OR `.propertymeta`. The
homepage card is a second card with its own class tree, not a restyling of
the preserved partial — `static_property_card.php` renders on search, the
archives, the location templates and the shortlist, and its `.js-favourite`
star is bound by class in js/main.js. A rule here that reached it would strip
shortlisting from five surfaces to change one.
FIVE PLACES THIS FIGHTS AN INHERITED DEFAULT, stating a value the prototype
did not have to. Same list as M09's, and for the same reasons:
0. **`line-height`.** The prototype's body is `line-height: 1.65` and this
theme's reset leaves the eyebrow, both links, the meta line and the price
at 1. None of them declares one in the reference, so transcribing only
its *declarations* leaves every one of them short.
1. `body { letter-spacing: 1px }` (:489). The prototype's body sets none, so
every `letter-spacing` here is measured against 0 and anything that does
not restate one silently gains a pixel per character. The meta line, the
price and the heading therefore say `letter-spacing: 0` and mean it.
2. `h2 { margin-bottom: 26px; font-size: 30px; letter-spacing: 0.5px;
line-height: 1.35 }` (:543). All four are overridden. The 26px is not
deleted, it moves to `.slg-property-grid-head`'s `margin-bottom`, so the
"View all properties" link sits on the heading's baseline rather than
26px above the grid on its own.
3. `h4 { font-size: 18px; font-weight: 400 }` (:553) plus the browser's own
`margin: 1.33em 0`. The card title is 15px uppercase with an asymmetric
14px/5px margin, and all of it is written out.
4. The reference sets `font-weight: 300` on h1–h4. **That weight is not
loadable here**: functions.php:232 enqueues `Open+Sans:400,600`, so a 300
resolves to 400 and the declaration would describe something other than
what ships. The heading is written as the 400 it will actually render at.
A theme-wide font-loading question, not M05's to settle.
BREAKPOINT IS THE PROTOTYPE'S OWN, 860, not Bootstrap's 767/991. It is what
produces the reference's column counts at the three acceptance viewports:
three at 1440, one at 768, one at 375. A Bootstrap 767 would put 768 on the
wrong side of the step by a single pixel.
The 16:10 box is reserved with `padding-top`, not with `aspect-ratio` on the
image and not with the file's intrinsic size. Section assembly rewrites core
images to `loading="lazy"` and main.js strips width/height on DOM ready, so an
unreserved box lands as a layout shift on a real page (CHA-319); a padded box
cannot be stripped that way. Same decision as M09's tiles and M13's rail.
Everything is scoped under `.slg-property-grid-*` / `.slg-property-card-*`, so
nothing here can reach markup this section did not emit. Mirrored by hand into
scss/_sections.scss, which is not compiled — same convention as the section
rules above.
--------------------------------------------------------------------------- */
.slg-property-grid-block {
width: 100%;
}
/* `align-items: flex-end` is what sits the link on the heading's baseline rather
than centring it against the eyebrow-plus-heading stack. */
.slg-property-grid-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 22px;
margin-bottom: 26px;
}
/* `min-width: 0` is what the prototype's bare gets for free and a flex
item does not: it lets a long heading wrap rather than refuse to shrink and
push the link out of the container. */
.slg-property-grid-titles {
min-width: 0;
}
.slg-property-grid-eyebrow {
font-size: 12px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #7c7c7c;
font-weight: 600;
line-height: 1.65;
margin-bottom: 11px;
}
.slg-section--shade-dark .slg-property-grid-eyebrow {
color: rgba(255, 255, 255, 0.85);
}
.slg-property-grid-heading {
font-size: 24px;
line-height: 1.25;
letter-spacing: 0;
font-weight: 400;
margin: 0;
}
.slg-property-grid-all {
flex: 0 0 auto;
font-size: 12px;
letter-spacing: 0.12em;
text-transform: uppercase;
font-weight: 600;
color: #7c7c7c;
border-bottom: 1px solid #e1e1e1;
padding-bottom: 3px;
line-height: 1.65;
text-decoration: none;
white-space: nowrap;
}
.slg-property-grid-all:hover,
.slg-property-grid-all:focus {
color: var(--slg-primary, #1aafc1);
border-color: var(--slg-primary, #1aafc1);
text-decoration: none;
}
.slg-section--shade-dark .slg-property-grid-all {
color: rgba(255, 255, 255, 0.85);
border-bottom-color: rgba(255, 255, 255, 0.35);
}
.slg-property-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 26px;
}
/* The two colour declarations are the prototype's `a{color:inherit;
text-decoration:none}` base, restated because this theme does not have it: a
card whose title is underlined and blue is a visible defect and the cost of
being explicit is two lines.
THE COLUMN IS A DEPARTURE FROM THE REFERENCE, and it is the one place this
block states something the prototype does not. The prototype's `.prop` is a
plain block, and it can be, because its three facility lines are one line
each — the copy was written to fit. This site's facility line is built from a
property's own amenities, and `Maid/Housekeeping` alone is longer than any
word in the reference, so on real data one card's line wraps and that card's
foot drops half a line below its neighbours'. A ragged row of prices is
visible at a glance and is not what the approved design looks like.
`align-items: stretch` is the grid's default, so every card is already the
height of the tallest; this makes the foot take up the slack rather than the
last line of text. The 14px above the foot does not change in magnitude —
it changes property, from the reference's `margin-top` to `padding-top`,
because `margin-top` is what has to become `auto` for the slack to be
absorbed. Measured in docs/harnesses/cha-387: the foot's internal geometry and
the figure's 16:10 box are unchanged by it at all three viewports. */
.slg-property-card {
display: flex;
flex-direction: column;
color: inherit;
text-decoration: none;
}
.slg-property-card:hover,
.slg-property-card:focus {
color: inherit;
text-decoration: none;
}
.slg-property-card-figure {
position: relative;
display: block;
width: 100%;
padding-top: 62.5%;
overflow: hidden;
background-color: #f6f6f6;
}
.slg-property-card-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.4s;
}
.slg-property-card:hover .slg-property-card-image,
.slg-property-card:focus .slg-property-card-image {
transform: scale(1.04);
}
/* The prototype's badge is square-cornered and flush to the top-left corner of
the photograph, with no offset — `top: 0; left: 0`, not an inset. */
.slg-property-card-badge {
position: absolute;
top: 0;
left: 0;
z-index: 1;
background: rgba(0, 0, 0, 0.7);
color: #fff;
font-size: 11.5px;
letter-spacing: 0.09em;
text-transform: uppercase;
padding: 6px 11px;
font-weight: 600;
line-height: 1.65;
}
.slg-property-card-title {
font-size: 15px;
letter-spacing: 0.06em;
text-transform: uppercase;
font-weight: 400;
line-height: 1.25;
margin: 14px 0 5px;
}
.slg-property-card-meta {
font-size: 13px;
letter-spacing: 0;
line-height: 1.65;
color: #7c7c7c;
}
.slg-section--shade-dark .slg-property-card-meta {
color: rgba(255, 255, 255, 0.8);
}
/* `margin-top: auto` is the column's slack; `padding-top` is the reference's own
14px, in the only property left that can carry it. See the card rule above. */
.slg-property-card-foot {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 14px;
margin-top: auto;
padding-top: 14px;
}
/* The foot's left slot. On the Live homepage it is the guide rate; on the main
site it is the property type, which is why this rule styles the slot and only
`b` inside it carries the teal. The renderer decides which, from a flag the
loop set — nothing in this stylesheet knows which site it is on. */
.slg-property-card-price {
font-size: 14px;
letter-spacing: 0;
line-height: 1.65;
color: #333333;
min-width: 0;
}
.slg-section--shade-dark .slg-property-card-price {
color: #fff;
}
/* `.currency` and `.numb` are the currency switcher's hooks, inside the `
`
the reference puts round the amount. They are named alongside it so a switched
currency keeps the same treatment rather than falling back to the 14px around
it. */
.slg-property-card-price b,
.slg-property-card-price b .currency,
.slg-property-card-price b .numb {
font-size: 21px;
font-weight: 600;
color: var(--slg-primary, #1aafc1);
}
/* `padding-bottom: 2px`, not the header link's 3px. The prototype states the
difference itself, in `.foot .link`. */
.slg-property-card-link {
flex: 0 0 auto;
font-size: 12px;
letter-spacing: 0.12em;
text-transform: uppercase;
font-weight: 600;
color: #7c7c7c;
border-bottom: 1px solid #e1e1e1;
padding-bottom: 2px;
line-height: 1.65;
white-space: nowrap;
}
.slg-property-card:hover .slg-property-card-link,
.slg-property-card:focus .slg-property-card-link {
color: var(--slg-primary, #1aafc1);
border-color: var(--slg-primary, #1aafc1);
}
.slg-section--shade-dark .slg-property-card-link {
color: rgba(255, 255, 255, 0.85);
border-bottom-color: rgba(255, 255, 255, 0.35);
}
@media (max-width: 860px) {
.slg-property-grid {
grid-template-columns: 1fr;
}
.slg-property-grid-head {
display: block;
}
.slg-property-grid-all {
display: inline-block;
margin-top: 14px;
}
}
@media (prefers-reduced-motion: reduce) {
.slg-property-card-image {
transition: none;
}
}
/* end M05 property grid — the block above is bounded explicitly so a section
landing after it is not mistaken for part of it, and so that a later append to
this file cannot be swallowed by a region delimited only by EOF. */
/* ---------------------------------------------------------------------------
M11 "Common questions" — the homepage FAQ treatment (§7 Epic C, CHA-397).
BEGIN
Scoped to `.slg-faq-block--home`, which only a homepage-context placement of
the `faq` layout emits. Nothing here can reach the FAQs page's nine groups,
the location accordion, the search sidebar accordion, the footer accordion or
the property page's — all five ride on the same `.acc` component, and four of
them are §3.4 preserved markup.
---------------------------------------------------------------------------
The `X` the review reported, and why no character is changed to fix it
---------------------------------------------------------------------------
The 9 September review saw the control paint as a literal `X`. Diagnosed
rather than papered over (CHA-397 evidence §2), and the codepoint was never
wrong:
- `.acc-title:before { content: "\0058" }` (style.css:3654) and
`.active.acc-title:before { content: "\0055" }` (:3650) are Glyphter's
plus and minus. Both glyphs exist in `fonts/Glyphter.svg`, and rendered at
150px after `document.fonts.ready` U+0058 IS a plus and U+0055 IS a minus.
- All four font formats serve 200 from the preview's own path, and
`document.fonts.check('14px Glyphter')` is true, so this is NOT the
relocated-stylesheet fault that once 404'd nine relative `url()`s.
- Abort `Glyphter.woff` and `Glyphter.ttf` at the network layer and the same
page paints the review's `X` exactly. `@font-face` (style.css:119)
declares no `font-display`, so it defaults to `auto` — Chrome blocks and
then swaps to the FALLBACK, which paints the `content` string literally
and never recovers for that paint.
So the `X` is a font-fallback paint, and the durable fix is not a different
letter: it is that this control should not need a webfont at all. The
reference's is plain text — `content:"+"` / `content:"\2013"` in the accent —
so transcribing the reference removes the failure mode as a side effect. The
legacy `.acc-title:before` is left exactly as it is for the four preserved
accordions that depend on it.
--------------------------------------------------------------------------- */
.slg-section--faq .slg-faq-block--home .slg-faq-head {
text-align: center;
}
.slg-section--faq .slg-faq-block--home .slg-faq-eyebrow {
font-size: 12px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #7c7c7c;
font-weight: 600;
line-height: 1.65;
margin: 0 0 11px;
}
/* `font-weight: 400`, not the reference's 300. The prototype loads
`Open+Sans:wght@300;400;600;700`; `functions.php:232` enqueues `400,600` only,
so a 300 here would describe something the browser cannot resolve. The fifth
Epic C module to report it — theme-wide, and not M11's to reopen. */
.slg-section--faq .slg-faq-block--home .slg-faq-heading {
font-size: clamp(23px, 2.9vw, 32px);
font-weight: 400;
line-height: 1.25;
letter-spacing: 0;
color: #333333;
margin: 0;
}
.slg-section--faq .slg-faq-block--home .slg-faq-rule {
width: 44px;
height: 2px;
background: var(--slg-primary, #1aafc1);
margin: 16px auto;
}
/* `.faq { max-width: 840px; margin: 22px auto 0 }`, transcribed. The measure is
the module's own and does not inherit the `.container` vs `.wrap` divergence
every other Epic C module reports, because 840 is narrower than either. */
.slg-section--faq .slg-faq-block--home .slg-faq-list {
max-width: 840px;
margin: 22px auto 0;
}
/* The reference rules EVERY item, the last one included — `.faq details` carries
the border with no `:last-child` exception, and the capture shows a line under
the fourth question. That is the opposite of the page treatment above, which
drops the last rule so a group does not sit hard against the next group's
chrome. Both `margin-bottom` and `padding-bottom` go to 0: the 18px of space
is `summary`'s own padding in the reference, so putting it on the item as well
would double it. */
.slg-section--faq .slg-faq-block--home .acc,
.slg-section--faq .slg-faq-block--home .acc:last-child {
border-bottom: solid 1px #e1e1e1;
margin-bottom: 0;
padding-bottom: 0;
}
/* `.faq summary { display:flex; justify-content:space-between; gap:18px;
padding:18px 0; font-size:15.5px }`. `width: 100%` is required and is not in
the reference: a `` is a block, and `.acc-title` is
`display: inline-block` (style.css:3536), so without it the flex line shrinks
to the question and the control lands beside the text instead of at the right
margin. */
.slg-section--faq .slg-faq-block--home .acc-title {
display: flex;
width: 100%;
justify-content: space-between;
align-items: baseline;
gap: 18px;
padding: 18px 0;
font-size: 15.5px;
font-weight: 400;
line-height: 1.65;
}
/* The 32px that clears the absolutely-positioned Glyphter icon is exactly what
this treatment must not have — the control is a flex sibling now, not an
overlay. */
.slg-section--faq .slg-faq-block--home .acc-title > span {
margin-left: 0;
padding: 0;
font-size: 15.5px;
letter-spacing: normal;
}
/* Every property the legacy `.acc-title:before` sets is answered here, because a
half-overridden absolute box would still be pulled out of the flex line:
`position`, `left`, `height`, `line-height` and `font-family` all come from
style.css:3635. `order: 2` is what puts it after the question; `flex: 0 0 auto`
stops `space-between` from stretching a one-character box. */
.slg-section--faq .slg-faq-block--home .acc-title:before {
content: "+";
font-family: inherit;
position: static;
left: auto;
height: auto;
line-height: 1;
font-size: 21px;
/* `400`, not the reference's 300, for the reason the heading above gives: the
theme enqueues Open Sans 400 and 600 only, so a 300 here would describe a
paint the browser cannot produce. It matters more than it looks: a 400-weight
`+` is 13.02px wide against the reference's 12.4-ish, and at 375 the fourth
question needs 304.63px of the 303.98px that leaves — so it wraps to two
lines where the reference keeps it on one. Measured, in
docs/harnesses/cha-397/. That is this divergence's first VISIBLE consequence
rather than a tonal one, and it is still theme-wide and not M11's to take. */
font-weight: 400;
color: var(--slg-primary, #1aafc1);
order: 2;
flex: 0 0 auto;
transition: none;
-webkit-transition: none;
}
/* U+2013, the reference's en dash — not a hyphen and not U+2212. */
.slg-section--faq .slg-faq-block--home .acc-title.active:before {
content: "\2013";
}
/* Below 991px the theme draws a SECOND control: `.acc .acc-title:after` at
style.css:4695 is a Glyphter glyph absolutely positioned at `right: 15px`,
with its own `.active` state at :4728. Left alone it would sit on top of the
`+` this treatment already puts on the right, at 768 and 375 only — which is
precisely the class of fault a 1440-only capture cannot see. Three selectors
deep so it beats `.acc .acc-title:after` on specificity rather than on
source order. */
.slg-section--faq .slg-faq-block--home .acc .acc-title:after {
display: none;
}
/* The reference's ``. A class, not an inline `style`: `.acc-content
{ display: none }` (style.css:3659) is what makes a panel start closed, and
`main.js:386` drives `slideToggle()`, which writes its own inline `display` and
from then on wins over both. So the first click closes this panel and every
click after that toggles it, exactly as if the editor had opened it.
Three selectors deep for the same reason as above: `.acc-content.mob` inside
the sub-991 media query (style.css:4736) re-asserts `display: none`, and this
has to beat it at every width. */
.slg-section--faq .slg-faq-block--home .slg-faq-item--open > .acc-content {
display: block;
}
/* The colour is on the panel, not only on its ``. ACF's wysiwyg hands back
`
`-wrapped HTML, so the reference's `.faq p { color: var(--muted) }` would
normally be enough — but the same panel also legitimately carries a list, and
a `
` that stayed at full ink beside a muted paragraph is a difference
nobody authored. */
/* `font-size: 15px` is stated rather than inherited, and it is the one place
this module transcribes a value the reference never declares. The reference's
answer paints at 15px because that is `body`'s size there; this theme's body
is 16px, so inheriting would make the ANSWER larger than the QUESTION —
15.5px — where the reference has it a half-point smaller. The relationship
inverts, which is visible, and it inverts for a reason that has nothing to do
with the FAQ. Transcribing only the declarations would have shipped it. */
.slg-section--faq .slg-faq-block--home .acc-content {
padding-top: 0;
padding-bottom: 6px;
color: #7c7c7c;
font-size: 15px;
}
.slg-section--faq .slg-faq-block--home .acc-content p {
line-height: 1.65;
margin-bottom: 0;
}
/* end M11 homepage FAQ — the block above is bounded explicitly so a section
landing after it is not mistaken for part of it, and so that a later append to
this file cannot be swallowed by a region delimited only by EOF. */
/* Preserve authored list semantics after the global reset. Scope these rules to
rich content so navigation, TOCs and card grids retain their own treatment. */
.slg-media-text__copy ul,
.slg-legal-intro ul,
.slg-legal-clause-body ul,
.slg-faq-block .acc-content ul { list-style-type: disc; margin: 0 0 1em; padding-left: 1.5em; }
.slg-media-text__copy ol,
.slg-legal-intro ol,
.slg-legal-clause-body ol,
.slg-faq-block .acc-content ol { list-style-type: decimal; margin: 0 0 1em; padding-left: 1.5em; }
.slg-media-text__copy li,
.slg-legal-intro li,
.slg-legal-clause-body li,
.slg-faq-block .acc-content li { list-style-type: inherit; margin-bottom: .4em; }
.slg-faq-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.slg-faq-block--home .slg-faq-actions { justify-content: center; }
/* Content-page fixes: align controls to the first text line, including wrapped questions. */
.slg-faq-block:not(.slg-faq-block--home) .acc-title { display: block; padding-left: 32px; line-height: 1.6; }
.slg-faq-block:not(.slg-faq-block--home) .acc-title > span { display: block; margin-left: 0; padding: 0; line-height: inherit; }
.slg-faq-block:not(.slg-faq-block--home) .acc-title:before { top: 3px; line-height: 20px; height: 20px; }
.slg-faq-actions .btn { width: auto; padding: 12px 22px; border: 1px solid var(--slg-primary, #33aec0); background: #fff; color: #333; line-height: 1.4; white-space: normal; }
.slg-faq-actions .btn:hover, .slg-faq-actions .btn:focus { background: var(--slg-primary, #33aec0); color: #fff; }
.content.about > .block.banner.slg-content-header { height: auto; min-height: 0; padding: 160px 0 40px; background: #25323b; margin: 0; }
.slg-content-header > img, .slg-content-header > .banner-overlay, .slg-content-header > .solid-overlay { display: none; }
.slg-content-header .page-title { position: static; padding: 0; margin: 0; transform: none; }
.slg-content-header h1 { max-width: 1000px; line-height: 1.25; }
.slg-pack-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; margin: 28px 0; }
.slg-pack-card { padding: 24px; border: 1px solid #ddd; background: #fff; }
.slg-pack-card > strong { display: block; margin-bottom: 10px; }
.slg-pack-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.slg-media-text__copy a.slg-pack-button { display: inline-block; padding: 12px 22px; background: var(--slg-primary, #33aec0); color: #fff; text-decoration: none; line-height: 1.5; }
.slg-pack-eyebrow { font-size: 13px; font-weight: 600; margin-bottom: 12px; }
@media (max-width:767px) {
.content.about > .block.banner.slg-content-header { padding: 130px 0 30px; }
.slg-pack-grid { grid-template-columns: 1fr; }
.slg-pack-actions a, .slg-faq-actions .btn { width: 100%; text-align: center; }
}
.slg-pack-grid > p:empty { display: none; }
.slg-media-text__copy table { width: 100%; table-layout: fixed; border-collapse: collapse; margin: 24px 0; }
.slg-media-text__copy th, .slg-media-text__copy td { padding: 16px; border: 1px solid #ddd; vertical-align: top; overflow-wrap: break-word; }
.slg-media-text__copy th { background: #25323b; color: #fff; font-weight: 600; }
/* The legacy mobile accordion adds a second right-hand control. FAQ already has one. */
.slg-faq-block:not(.slg-faq-block--home) .acc .acc-title:after { content: none; display: none; }
/* Preserve readable rhythm for pack cards containing a label followed by plain text. */
.slg-pack-card { line-height: 1.65; }
.slg-pack-card > strong { display: block; margin: 0 0 10px; line-height: 1.4; }
.slg-pack-card > strong + br { display: none; }
.slg-pack-card p { margin-bottom: 16px; line-height: 1.65; }
.slg-pack-card p:last-child { margin-bottom: 0; }
.slg-pack-card h2, .slg-pack-card h3 { margin-top: 0; margin-bottom: 16px; }
.slg-pack-badge { display: block; margin-bottom: 16px; font-weight: 600; }
/* Search destination: native controls feed the established property search. */
.slg-search-entry__form { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; margin: 32px 0; align-items: end; }
.slg-search-entry__form label { display: block; font-weight: 600; margin-bottom: 10px; }
.slg-search-entry__form input:not([type=hidden]), .slg-search-entry__form select { width: 100%; min-width: 0; height: 48px; padding: 10px 12px; border: 1px solid #bbb; border-radius: 0; background: #fff; color: #333; font: inherit; }
.slg-search-entry__form button { height: 48px; padding: 10px 20px; background: var(--slg-primary, #33aec0); color: #fff; border: 0; font: inherit; font-weight: 600; cursor: pointer; }
.slg-search-entry__notice { padding: 18px 20px; background: #fff; border-left: 3px solid var(--slg-primary, #33aec0); }
.slg-search-entry a { text-decoration: underline; }
.slg-search-entry__help { line-height: 1.65; }
@media(max-width:767px) { .slg-search-entry__form { grid-template-columns: 1fr; gap: 20px; } }
/* Page-section form layout; Gravity Forms retains its validation and conditional fields. */
.slg-contact-section__intro { max-width: 800px; margin-bottom: 28px; }
.slg-contact-section__form { width: 100%; max-width: 900px; margin: 0; padding: 28px; background: #fff; }
.slg-contact-section .gform_wrapper { margin: 0; max-width: 100%; }
.slg-contact-section .gfield { margin-bottom: 20px; }
.slg-contact-section .gfield_label { line-height: 1.5; margin-bottom: 8px; }
.slg-contact-section input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=submit]), .slg-contact-section select, .slg-contact-section textarea { max-width: 100%; min-height: 44px; padding: 10px; border: 1px solid #bbb; background: #fff; color: #333; }
.slg-contact-section .gform_footer input[type=submit] { padding: 14px 24px; background: var(--slg-primary, #33aec0); color: #fff; border: 0; }
@media(max-width:767px) { .slg-contact-section__form { padding: 20px 16px; } }
/* Imported content must retain rhythm at every nesting depth, not just direct children. */
.slg-media-text__copy .slg-pack-content { line-height: 1.65; }
.slg-media-text__copy .slg-pack-content p { margin: 0 0 20px; line-height: 1.65; }
.slg-media-text__copy .slg-pack-content h2 { margin: 0 0 24px; line-height: 1.3; }
.slg-media-text__copy .slg-pack-content h3 { margin: 28px 0 12px; line-height: 1.35; }
.slg-media-text__copy .slg-pack-content h3:first-child { margin-top: 0; }
.slg-media-text__copy .slg-pack-content .slg-pack-card h3 { margin-top: 0; }
.slg-media-text__copy .slg-pack-content p:last-child { margin-bottom: 0; }
.slg-pack-content ul, .slg-pack-content ol { margin: 20px 0; padding-left: 24px; }
.slg-pack-content li { margin-bottom: 10px; line-height: 1.65; }
.slg-pack-content .slg-pack-grid { margin: 28px 0; }
.slg-pack-content .slg-pack-card { min-width: 0; }
.slg-pack-callout { margin: 28px 0; padding: 24px; border-left: 3px solid var(--slg-primary, #33aec0); background: #fff; }
.slg-pack-content dt { font-weight: 600; margin-top: 18px; }
.slg-pack-content dd { margin: 6px 0 20px; line-height: 1.65; }
.slg-pack-content .slg-pack-subsection + .slg-pack-subsection { margin-top: 32px; }
.slg-pack-content blockquote { margin: 24px 0; padding: 20px 24px; border-left: 3px solid var(--slg-primary, #33aec0); line-height: 1.65; }
.slg-pack-content .slg-pack-callout > strong { display: block; margin-bottom: 12px; }
.slg-pack-content .slg-pack-button + .slg-pack-button { margin-left: 12px; }
@media(max-width:767px) { .slg-pack-content .slg-pack-button { max-width: 100%; overflow-wrap: anywhere; } .slg-pack-content .slg-pack-button + .slg-pack-button { margin-left: 0; margin-top: 12px; } }
.slg-pack-content .slg-pack-grid-four { grid-template-columns: repeat(4,minmax(0,1fr)); }
.slg-pack-content .slg-pack-grid-three { grid-template-columns: repeat(3,minmax(0,1fr)); }
@media(max-width:1050px) { .slg-pack-content .slg-pack-grid-four { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width:767px) { .slg-pack-content .slg-pack-grid-four, .slg-pack-content .slg-pack-grid-three { grid-template-columns: 1fr; } }
.slg-faq-block .acc-title:focus-visible { outline: 2px solid var(--slg-primary-deep, #247787); outline-offset: 5px; }
/* ---- Content-pack refinement (2 Oct review): one type scale, visible links, a
primary/secondary button pair, balanced card grids and a finished closing band. ---- */
.slg-pack-content, .slg-pack-content p, .slg-pack-content li, .slg-pack-content dd, .slg-pack-content dt, .slg-pack-content .slg-pack-card, .slg-pack-content .slg-pack-callout, .slg-pack-content blockquote, .slg-pack-content blockquote footer, .slg-pack-content div { font-size: 15px; letter-spacing: .3px; }
.slg-pack-content, .slg-pack-content p, .slg-pack-content li { line-height: 1.7; }
.slg-pack-content p { max-width: 78ch; }
.slg-pack-content .slg-pack-card p, .slg-pack-content .slg-pack-callout p { max-width: none; }
.slg-pack-content blockquote footer { margin-top: 10px; font-size: 13px; color: #848484; }
.slg-pack-content .slg-pack-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: #848484; }
.slg-pack-content a:not(.slg-pack-button) { color: var(--slg-primary-hover, #158d9c); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.slg-pack-content a:not(.slg-pack-button):hover, .slg-pack-content a:not(.slg-pack-button):focus { color: var(--slg-primary-deep, #0d7d8c); }
.slg-pack-content .livemark, .slg-section .livemark { font-style: italic; color: var(--slg-primary, #1aafc1); white-space: nowrap; }
.slg-pack-card { border-color: #e5e5e5; border-radius: 3px; }
.slg-pack-callout, .slg-pack-content blockquote { border-left-color: var(--slg-primary, #1aafc1); border-radius: 0 3px 3px 0; }
.slg-pack-content blockquote { background: #f4f4f4; }
/* buttons: one size everywhere; the second action of a pair is the secondary */
.slg-pack-actions { align-items: center; }
.slg-pack-actions > br, .slg-pack-content .slg-pack-button + br { display: none; }
.slg-media-text__copy a.slg-pack-button, .slg-pack-content a.slg-pack-button { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 12px 22px; border: 1px solid var(--slg-primary, #1aafc1); border-radius: 3px; background: var(--slg-primary, #1aafc1); color: #fff; font-size: 13px; font-weight: 700; line-height: 1.3; letter-spacing: 1px; text-transform: uppercase; text-decoration: none; }
.slg-media-text__copy a.slg-pack-button:hover, .slg-media-text__copy a.slg-pack-button:focus { border-color: var(--slg-primary-hover, #158d9c); background: var(--slg-primary-hover, #158d9c); color: #fff; }
.slg-pack-content .slg-pack-button ~ .slg-pack-button { border-color: var(--slg-primary, #1aafc1); background: #fff; color: var(--slg-primary-hover, #158d9c); }
.slg-pack-content .slg-pack-button ~ .slg-pack-button:hover, .slg-pack-content .slg-pack-button ~ .slg-pack-button:focus { background: #f4f4f4; color: var(--slg-primary-deep, #0d7d8c); }
.slg-pack-content .slg-pack-button + .slg-pack-button { margin-left: 0; }
.slg-pack-content :not(.slg-pack-actions) > .slg-pack-button + .slg-pack-button, .slg-pack-content :not(.slg-pack-actions) > .slg-pack-button + br + .slg-pack-button { margin-left: 12px; }
/* link rows (related solutions and similar) read as a set of destinations */
.slg-pack-content .slg-pack-actions > a:not(.slg-pack-button) { display: inline-flex; align-items: center; min-height: 44px; padding: 9px 14px; border: 1px solid #ccc; border-radius: 3px; background: #fff; color: #333; font-size: 12px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase; text-decoration: none; }
.slg-pack-content .slg-pack-actions > a:not(.slg-pack-button):hover, .slg-pack-content .slg-pack-actions > a:not(.slg-pack-button):focus { border-color: var(--slg-primary, #1aafc1); color: var(--slg-primary-hover, #158d9c); }
/* card grids: threes sit three-up, and an odd last card spans the row instead of leaving a gap */
@media(min-width:768px) {
.slg-pack-content .slg-pack-grid:not(.slg-pack-grid-three):not(.slg-pack-grid-four):has(> :nth-child(3):last-child),
.slg-pack-content .slg-pack-grid:not(.slg-pack-grid-three):not(.slg-pack-grid-four):has(> :nth-child(6):last-child),
.slg-pack-content .slg-pack-grid:not(.slg-pack-grid-three):not(.slg-pack-grid-four):has(> :nth-child(9):last-child) { grid-template-columns: repeat(3,minmax(0,1fr)); }
.slg-pack-content .slg-pack-grid:not(.slg-pack-grid-three):not(.slg-pack-grid-four) > :nth-child(5):last-child,
.slg-pack-content .slg-pack-grid:not(.slg-pack-grid-three):not(.slg-pack-grid-four) > :nth-child(7):last-child { grid-column: 1 / -1; }
}
/* the last row that carries action buttons is the page's closing call to action */
.slg-section--media-and-text.slg-section--shade-white:has(.slg-pack-actions > .slg-pack-button):not(:has(.slg-pack-grid, .slg-pack-card, ul, ol, table, blockquote, h3)):not(:has(~ .slg-section .slg-pack-actions > .slg-pack-button)):not(:has(~ .slg-section--cta-banner)) { background: #25323b; padding-top: 64px; padding-bottom: 64px; }
.slg-section--media-and-text.slg-section--shade-white:has(.slg-pack-actions > .slg-pack-button):not(:has(.slg-pack-grid, .slg-pack-card, ul, ol, table, blockquote, h3)):not(:has(~ .slg-section .slg-pack-actions > .slg-pack-button)):not(:has(~ .slg-section--cta-banner)) .slg-pack-content { max-width: 760px; margin: 0 auto; text-align: center; }
.slg-section--media-and-text.slg-section--shade-white:has(.slg-pack-actions > .slg-pack-button):not(:has(.slg-pack-grid, .slg-pack-card, ul, ol, table, blockquote, h3)):not(:has(~ .slg-section .slg-pack-actions > .slg-pack-button)):not(:has(~ .slg-section--cta-banner)) :is(h2, p, .slg-pack-eyebrow) { color: #fff; margin-left: auto; margin-right: auto; }
.slg-section--media-and-text.slg-section--shade-white:has(.slg-pack-actions > .slg-pack-button):not(:has(.slg-pack-grid, .slg-pack-card, ul, ol, table, blockquote, h3)):not(:has(~ .slg-section .slg-pack-actions > .slg-pack-button)):not(:has(~ .slg-section--cta-banner)) .slg-pack-actions { justify-content: center; }
.slg-section--media-and-text.slg-section--shade-white:has(.slg-pack-actions > .slg-pack-button):not(:has(.slg-pack-grid, .slg-pack-card, ul, ol, table, blockquote, h3)):not(:has(~ .slg-section .slg-pack-actions > .slg-pack-button)):not(:has(~ .slg-section--cta-banner)) .slg-pack-button ~ .slg-pack-button { border-color: #fff; background: transparent; color: #fff; }
.slg-section--media-and-text.slg-section--shade-white:has(.slg-pack-actions > .slg-pack-button):not(:has(.slg-pack-grid, .slg-pack-card, ul, ol, table, blockquote, h3)):not(:has(~ .slg-section .slg-pack-actions > .slg-pack-button)):not(:has(~ .slg-section--cta-banner)) a:not(.slg-pack-button) { color: #fff; }
/* tables and legal lists need room between wrapped lines */
.slg-comparison th, .slg-comparison td, .slg-section--legal-content li, .slg-section--legal-content p { line-height: 1.6; }
/* an area tile without an image is a compact text tile, not an empty box */
.slg-area-tiles-tile:not(:has(img)) { padding: 0; border: 1px solid #e5e5e5; border-left: 3px solid var(--slg-primary, #1aafc1); border-radius: 3px; background: #fff; }
.slg-area-tiles-tile:not(:has(img)) .slg-area-tiles-caption { position: static; padding: 18px 20px; background: none; color: #333; }
.slg-area-tiles-tile:not(:has(img)) .slg-area-tiles-line { opacity: 1; color: #848484; }
.slg-area-tiles-tile:not(:has(img)):hover, .slg-area-tiles-tile:not(:has(img)):focus { border-color: var(--slg-primary, #1aafc1); background: #f4f4f4; }
/* the Live mark is gold italic wherever it appears */
.header .logo .livemark, header .livemark { color: var(--slg-primary, #1aafc1); font-style: italic; }
/* ---- Full-pass refinement (7 Oct): legal links, single-column packs, area tile copy, hub grid,
overview-map status, blog empty state, and content clearance for the fixed notification bar. ---- */
.slg-section--legal-content a:not(.btn) { color: var(--slg-primary-hover, #158d9c); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.slg-section--legal-content a:not(.btn):hover, .slg-section--legal-content a:not(.btn):focus { color: var(--slg-primary-deep, #0d7d8c); }
.slg-pack-content .slg-pack-grid:has(> :only-child) { grid-template-columns: minmax(0,1fr); }
.slg-pack-content .slg-pack-grid-links .slg-pack-card,
.slg-pack-content .slg-pack-card:has(> p:last-child > a:only-child) { display: flex; flex-direction: column; }
.slg-pack-content .slg-pack-grid-links .slg-pack-card > p:last-child,
.slg-pack-content .slg-pack-card:has(> p:last-child > a:only-child) > p:last-child { margin-top: auto; margin-bottom: 0; }
@media(min-width:768px) and (max-width:1050px) { .slg-pack-content .slg-pack-grid-links { grid-template-columns: repeat(2,minmax(0,1fr)); } }
.slg-pack-content .slg-pack-related-cases .slg-pack-card h3 { font-size: 17px; line-height: 1.35; }
.slg-area-tiles-tile:not(:has(img)) .slg-area-tiles-line { display: block; margin-top: 6px; font-style: normal; font-size: 13px; line-height: 1.55; opacity: 1; }
.slg-area-tiles-tile:not(:has(img)) .slg-area-tiles-name { display: block; font-size: 17px; }
.slg-map-status--inline { position: static; display: block; margin: 0; padding: 22px 24px; border: 1px solid #e5e5e5; border-left: 3px solid var(--slg-primary, #1aafc1); border-radius: 3px; background: #f7f7f7; color: #333; font-size: 14px; line-height: 1.6; }
.slg-map-status--inline b { display: block; margin-bottom: 4px; font-size: 15px; }
.slg-map-status--inline a { color: var(--slg-primary-hover, #158d9c); text-decoration: underline; }
.content.blog .slg-blog-empty { padding: 40px 0 60px; text-align: center; }
.content.blog .slg-blog-empty h2 { margin-bottom: 12px; }
.content.blog .slg-blog-empty p { margin: 0 auto; max-width: 60ch; letter-spacing: normal; line-height: 1.6; }
.content.blog .slg-blog-empty a { color: var(--slg-primary-hover, #158d9c); text-decoration: underline; }
/* legacy sidebar: the guests control stays inside the panel */
.sidebar.stick .locpers .select, .sidebar.stick .locpers .input { max-width: 100%; min-width: 0; }
.sidebar.stick .locpers .select .select2-container, .sidebar.stick .locpers select { max-width: 100% !important; }
.slg-area-tiles-tile:not(:has(img)) .slg-area-tiles-caption { display: block; }
@media(min-width:768px) { .slg-area-tiles-grid:has(> :nth-child(6):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* the "You are here" tag on the dark panel: the site colour (Live purple) is unreadable on #333 */
.slg-booking-choice-panel--dark .slg-booking-choice-tag { color: rgba(255, 255, 255, 0.78); }
.sidebar.stick .select2-container, .sidebar.stick .select2-selection--single { min-width: 0 !important; max-width: 100%; }
/* ---- Second pass (7 Oct): hero enquiry route, narrow forms, enquiry aside, comparison spacing ---- */
.slg-section--hero .homeform.slg-personal-enquiry .input > label, .slg-section--hero .homeform.slg-personal-enquiry .input > .input > label { display: block; margin: 0 0 5px; font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: #fff; line-height: 1.3; }
.slg-section--hero .homeform.slg-personal-enquiry .homebtns { align-self: end; }
.slg-hero-route { display: inline-flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; padding: 4px; border-radius: 4px; background: rgba(255,255,255,.14); }
.slg-hero-route__tab { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 14px; border-radius: 3px; font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #fff; text-decoration: none; }
.slg-hero-route__tab.is-active { background: #fff; color: #25323b; }
a.slg-hero-route__tab:hover, a.slg-hero-route__tab:focus { background: rgba(255,255,255,.18); color: #fff; text-decoration: none; }
.slg-hero-helper { margin: 12px 0 0; max-width: 72ch; font-size: 13px; line-height: 1.6; letter-spacing: normal; color: rgba(255,255,255,.88); }
@media(max-width:767px) { .slg-hero-route { display: flex; } .slg-hero-route__tab { flex: 1 1 auto; justify-content: center; } }
/* Gravity Forms in content sections: required marks stay beside the label, boxed selects, one submit size */
.slg-contact-section .gfield_label, .slg-contact-section legend.gfield_label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; width: auto; }
.slg-contact-section .gfield_required { position: static; float: none; margin: 0; display: inline; }
.slg-contact-section select { -webkit-appearance: menulist; appearance: menulist; border: 1px solid #bbb; background: #fff; }
.slg-contact-section .ginput_container_select::after { display: none; }
.slg-contact-section .gform_footer input[type=submit], .slg-contact-section .gform_footer .gform_button { min-height: 48px; padding: 14px 28px; font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.slg-contact-section .slg-consent { margin: 8px 0 0; font-size: 13px; line-height: 1.6; color: #666; letter-spacing: normal; }
@media(max-width:767px) { .slg-contact-section .gfield { margin-bottom: 16px; } .slg-contact-section .gfield_label { font-size: 12px; } }
/* Live Enquire: the contact aside sits beside the form on desktop */
.slg-contact-aside { padding: 24px; border: 1px solid #e5e5e5; border-top: 3px solid var(--slg-primary, #1aafc1); border-radius: 3px; background: #fff; letter-spacing: normal; }
.slg-contact-aside .slg-pack-eyebrow { margin-bottom: 6px; }
.slg-contact-aside h3 { margin: 0 0 16px; font-size: 22px; line-height: 1.3; }
.slg-contact-aside dl { margin: 0; }
.slg-contact-aside dt { margin: 14px 0 2px; font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: #848484; }
.slg-contact-aside dd { margin: 0; font-size: 15px; line-height: 1.55; color: #333; }
.slg-contact-aside dd.muted { color: #666; font-size: 14px; }
.slg-contact-aside a { color: var(--slg-primary-hover, #158d9c); text-decoration: underline; }
/* heading and lead stay above the form; the aside follows the form on small screens and sits beside it from 992px */
.slg-contact-section:has(.slg-contact-aside) { display: grid; grid-template-columns: minmax(0,1fr); gap: 0 32px; }
.slg-contact-section:has(.slg-contact-aside) .slg-contact-section__intro { display: contents; }
.slg-contact-section:has(.slg-contact-aside) .slg-contact-section__intro > h2 { order: 1; margin: 0 0 12px; }
.slg-contact-section:has(.slg-contact-aside) .slg-contact-section__intro > p { order: 2; max-width: 800px; margin: 0 0 24px; }
.slg-contact-section:has(.slg-contact-aside) .slg-contact-section__form { order: 3; max-width: none; }
.slg-contact-section:has(.slg-contact-aside) .slg-contact-aside { order: 4; margin-top: 24px; }
@media(min-width:992px) {
.slg-contact-section:has(.slg-contact-aside) { grid-template-columns: minmax(0,1fr) 340px; align-items: start; }
.slg-contact-section:has(.slg-contact-aside) .slg-contact-section__intro > h2, .slg-contact-section:has(.slg-contact-aside) .slg-contact-section__intro > p, .slg-contact-section:has(.slg-contact-aside) .slg-contact-section__form { grid-column: 1; }
.slg-contact-section:has(.slg-contact-aside) .slg-contact-aside { grid-column: 2; grid-row: 1 / span 6; margin-top: 0; }
}
/* comparison tables: heading row, table and note read as one block */
.slg-section--media-and-text + .slg-section--comparison-table { padding-top: 0 !important; margin-top: -8px; }
.slg-section--comparison-table + .slg-section--media-and-text { padding-top: 0 !important; margin-top: -24px; }
.slg-section--comparison-table + .slg-section--media-and-text .slg-pack-content p { font-size: 13px; color: #666; }
/* enquiry-route hero: the Live route is the second tab, so the duplicate lower button is hidden (markup kept) */
.slg-section--hero:has(.slg-hero-route a.slg-hero-route__tab) .homeform .col-md-7.homebtns > a.slg-hero-cta { display: none; }
/* legacy GF rules outrank the section rules above; pin the label row and the boxed select explicitly */
body .slg-contact-section .gform_wrapper .gfield .gfield_label, body .slg-contact-section .gform_wrapper .gfield legend.gfield_label { display: flex !important; flex-wrap: wrap; align-items: baseline; gap: 0 6px; width: auto !important; }
body .slg-contact-section .gform_wrapper .gfield_label .gform-field-label__text { display: inline !important; width: auto !important; }
body .slg-contact-section .gform_wrapper .gfield_label .gfield_required { display: inline !important; }
body .slg-contact-section .gform_wrapper select { border: 1px solid #bbb !important; border-radius: 0; background: #fff; padding: 10px; min-height: 44px; }
/* ---- Third pass (7 Oct): sidebar Guests width, hero panel finish, selected card on return, browsing-rule promotion cards ---- */
.sidebar.stick .locpers .select { flex: 0 0 122px; }
.sidebar.stick .locpers .input { flex: 1 1 auto; min-width: 0; }
.sidebar.stick .locpers .select2-selection__rendered { letter-spacing: 0; padding-right: 18px; }
.slg-section--hero .homeform.slg-personal-enquiry:before { border-radius: 4px; margin: -12px; }
/* 8 Oct 2026: no visual outline on the card you returned to (Charles); the restored scroll/selection state is kept without decoration. */
.slg-promotions--pending, .slg-promo-copy[hidden], .slg-promo-media[hidden] { display: none; }
.slg-promo-nav[hidden] { display: none; }
/* Main review, 8 October: enquiry-mode hero panel (kept for the enquiry route; the search route rules follow under "Agreed prototype 4"). */
.slg-main-site.home .slg-section--hero .homeform.slg-personal-enquiry {padding:16px;background:rgba(255,255,255,.16);margin-top:0;align-items:end;gap:12px;}
:is(.slg-main-site,.slg-live-site).home .slg-section--hero .homeform .input .input {margin:0;padding:0;}
.slg-main-site.home .slg-hero-route {margin:24px 0 0;max-width:540px;background:rgba(0,0,0,.25);}
.slg-main-site.home .slg-section--hero .banner-text .container {max-width:1180px;}
.slg-main-site.home .slg-section--hero .homesubheader {max-width:760px;font-size:15px;line-height:1.6;}
:is(.slg-main-site,.slg-live-site).home .slg-section--hero h1.homeheader {max-width:22em;}
@media(max-width:600px){:is(.slg-main-site,.slg-live-site).home .slg-section--hero .homeform {padding:12px;gap:12px 8px;}.slg-main-site.home .slg-hero-route {font-size:10px;}:is(.slg-main-site,.slg-live-site).home .slg-section--hero .homeform .homebtns {grid-column:1/-1;}:is(.slg-main-site,.slg-live-site).home .slg-section--hero h1.homeheader {font-size:30px;}}
.slg-hero-service-detail {margin-top:16px;max-width:780px;color:#fff;font-size:14px;line-height:1.6;letter-spacing:0;}
.slg-hero-service-detail summary {cursor:pointer;display:list-item;font-weight:600;}
.slg-hero-service-detail > div {padding:16px 0 0;}
.slg-main-site.home .slg-hero-helper {font-size:12px;line-height:1.5;}
/* Keep the group promotion fixed to the viewport. */
.slg-main-site .notificationBar .container {position:relative;}
.slg-main-site.home .slg-hero-service-detail summary::after {content:' +';}
.slg-main-site.home .slg-hero-service-detail[open] summary::after {content:' −';}
@media(max-width:600px){:is(.slg-main-site,.slg-live-site).home .slg-section--hero .block.banner {padding-top:110px;}:is(.slg-main-site,.slg-live-site).home .slg-hero-eyebrow {font-size:10px;}.slg-main-site.home .slg-hero-helper {max-width:100%;}}
@media(max-width:600px){:is(.slg-main-site,.slg-live-site).home .slg-section--hero .homeform > .no-col-padding > .input:has([name=property_name]) {grid-column:1/-1;}:is(.slg-main-site,.slg-live-site).home .slg-section--hero .homeform .input:has([name=property_name]) label {min-height:0;}}
/* Agreed prototype 4 — Main hero is a compact catalogue search. */
.slg-main-site .notificationBar {position:fixed!important;bottom:0!important;left:0!important;z-index:1001;}
:is(.slg-main-site,.slg-live-site).home .slg-section--hero h1.homeheader {max-width:17em;font-weight:400;font-size:clamp(29px,4vw,44px);line-height:1.25;margin-bottom:14px;}
:is(.slg-main-site,.slg-live-site).home .slg-section--hero .homeform {grid-template-columns:1fr 1fr 1.2fr .85fr auto;padding:10px;margin:28px 0 0;background:rgba(255,255,255,.16);gap:8px;align-items:stretch;}
:is(.slg-main-site,.slg-live-site).home .slg-section--hero .homeform:before {content:none;display:none;}
:is(.slg-main-site,.slg-live-site).home .slg-section--hero .homeform .input:has([name=property_name]),
:is(.slg-main-site,.slg-live-site).home .slg-section--hero .homeform .col-md-7.homebtns {display:none;}
:is(.slg-main-site,.slg-live-site).home .slg-section--hero .homeform .input > label {display:none;}
:is(.slg-main-site,.slg-live-site).home .slg-section--hero .homeform .input,
:is(.slg-main-site,.slg-live-site).home .slg-section--hero .homeform .homebtns {grid-row:auto;grid-column:auto;margin:0;}
:is(.slg-main-site,.slg-live-site).home .slg-section--hero .block.banner {padding:160px 0 38px;}
@media(max-width:991px){:is(.slg-main-site,.slg-live-site).home .slg-section--hero .homeform {grid-template-columns:repeat(2,minmax(0,1fr));}:is(.slg-main-site,.slg-live-site).home .slg-section--hero .homeform .homebtns {grid-column:1/-1;}:is(.slg-main-site,.slg-live-site).home .slg-section--hero .block.banner {padding-top:124px;}}
/* Keep search filters aligned with results rather than Bootstrap push offsets. */
@media(min-width:992px){
.slg-main-site.search .search-block > .mob-container {max-width:1180px;padding:0 20px;margin:0 auto;} /* prototype: 1140px wrap */
.slg-main-site.search .search-block > .mob-container > .row {display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:22px;margin:0;} /* prototype: 818px list, 300px map, 22px gap */
.slg-main-site.search #search-results-container,.slg-main-site.search #search-map-container {float:none;left:auto;width:auto;min-width:0;padding-left:0;padding-right:0;}
.slg-main-site.search #search-map-container {padding-top:34px;}
}
@media(min-width:992px){.slg-main-site.search .search-block > .mob-container > .row:before,.slg-main-site.search .search-block > .mob-container > .row:after {display:none;}}
/* Use the prototype's subtle corner radius for photographic media. */
.slg-main-site .border-r,
.slg-main-site .slg-media-text img,
.slg-main-site .slg-area-tiles-tile,
.slg-main-site .slg-map-card img {border-radius:3px!important;}
/* 8 Oct regression pass: prototype 4 M04 split-pane treatment for the September "Two ways" pack cards (classes added by scripts/section-demo-data/regression-main-homepage-2026-10-08.php; copy untouched). */
.slg-pack-content .slg-pack-grid.slg-pack-split {gap:0;border:1px solid #e1e1e1;}
.slg-pack-content .slg-pack-split > .slg-pack-card {border:0;padding:38px 34px;}
.slg-pack-content .slg-pack-split > .slg-pack-card + .slg-pack-card {border-left:1px solid #e1e1e1;}
.slg-pack-content .slg-pack-split > .slg-pack-card--dark {background:#333;color:#fff;}
.slg-pack-content .slg-pack-split > .slg-pack-card--dark h3,.slg-pack-content .slg-pack-split > .slg-pack-card--dark p,.slg-pack-content .slg-pack-split > .slg-pack-card--dark li {color:#fff;}
.slg-pack-content .slg-pack-split > .slg-pack-card--dark p:not(:has(a)) {color:rgba(255,255,255,.82);}
.slg-pack-content .slg-pack-split > .slg-pack-card ul {list-style:none;padding:0;margin:18px 0 24px;display:grid;grid-template-columns:1fr 1fr;gap:9px 20px;}
.slg-pack-content .slg-pack-split > .slg-pack-card li {position:relative;padding-left:20px;margin:0;line-height:1.5;}
.slg-pack-content .slg-pack-split > .slg-pack-card li:before {content:'';position:absolute;left:0;top:9px;width:7px;height:7px;background:var(--slg-primary,#1aafc1);}
.slg-pack-content .slg-pack-split > .slg-pack-card h3 {font-size:23px;line-height:1.25;margin:0 0 12px;}
.slg-media-text__copy .slg-pack-split > .slg-pack-card--dark a.slg-pack-button {background:var(--slg-primary,#1aafc1);color:#fff;}
.slg-media-text__copy .slg-pack-split > .slg-pack-card:not(.slg-pack-card--dark) a.slg-pack-button {background:transparent;border:1px solid #333;color:#333;}
.slg-media-text__copy .slg-pack-split > .slg-pack-card:not(.slg-pack-card--dark) a.slg-pack-button:hover {background:#333;color:#fff;}
@media(max-width:767px){.slg-pack-content .slg-pack-split > .slg-pack-card + .slg-pack-card {border-left:0;border-top:1px solid #e1e1e1;}.slg-pack-content .slg-pack-split > .slg-pack-card {padding:26px 20px;}.slg-pack-content .slg-pack-split > .slg-pack-card ul {grid-template-columns:1fr;}}
/* ---- Property page: agreed design (8 Oct 2026 PDF / lsa-search-prototype). Replaces the 8 Oct Main-polish property rules. ---- */
.single-property #page > .block.banner,.single-property .content.about > .block.banner {display:none;}
.single-property,.single-property .site {background:#fff;}
.slg-pdp.container.no-top {padding-top:120px;max-width:1220px;}
.slg-pdp-grid {display:grid;grid-template-columns:minmax(0,1fr) 400px;column-gap:40px;grid-template-areas:"head head" "main aside";margin:0;align-items:start;}
.slg-pdp-grid:before,.slg-pdp-grid:after {display:none;}
@media(min-width:992px){.single-property div#page.site {overflow:visible;}} /* div#page{overflow:hidden} would stop the enquiry card sticking; desktop only, the toggled mobile menu keeps its clip */
.slg-pdp-head {grid-area:head;min-width:0;}
.slg-pdp-main {grid-area:main;width:100%!important;float:none!important;min-width:0;padding:0;}
.slg-pdp-aside {grid-area:aside;width:100%!important;float:none!important;padding:0;position:relative;align-self:start;max-height:none;overflow:visible;}
/* Both sidebar variants occupy the whole grid track, never a Bootstrap fraction. */
.slg-pdp-grid > .ratehawk-sidebar-col {grid-area:aside;width:100%!important;min-width:0;float:none!important;padding:0;align-self:start;}
.slg-pdp-aside.slg-aside-fits {position:sticky;top:var(--slg-aside-top,120px);}
.slg-pdp-top {display:flex;justify-content:space-between;align-items:center;gap:16px;margin:0 0 14px;}
.slg-pdp-back {display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:13px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:#333;text-decoration:none;}
.slg-pdp-back:hover {color:var(--slg-primary,#1aafc1);}
.slg-pdp-ref {font-size:12px;letter-spacing:1px;color:#848484;}
.slg-pdp-crumbs {font-size:13px;color:#848484;margin:0 0 12px;letter-spacing:0;}
.slg-pdp-crumbs a {color:#848484;text-decoration:none;} .slg-pdp-crumbs a:hover {color:var(--slg-primary,#1aafc1);} .slg-pdp-crumbs span {margin:0 6px;color:#ccc;}
.slg-pdp-identity {position:relative;padding-right:56px;margin:0 0 18px;line-height:1.5;letter-spacing:0;}
.slg-pdp-eyebrow {display:block;font-size:12px;letter-spacing:1px;text-transform:uppercase;color:#848484;margin:0 0 4px;}
.slg-pdp-identity h1 {font-size:30px;font-weight:600;letter-spacing:1px;line-height:1.25;margin:0;color:#333;text-transform:none;}
.slg-pdp-price {font-size:13px;letter-spacing:1px;text-transform:uppercase;margin:10px 0 0;color:#333;}
.slg-pdp-guide {font-size:12px;color:#848484;margin:6px 0 0;letter-spacing:.3px;}
.slg-pdp-fav {position:absolute;top:-4px;right:0;width:48px;height:48px;display:grid;place-items:center;border:0;background:none;border-radius:50%;color:#333;padding:0;cursor:pointer;}
.slg-pdp-fav svg {width:23px;height:23px;} .slg-pdp-fav:hover {background:#f4f4f4;}
.slg-pdp-fav.star-filled svg,.slg-rel-fav.star-filled svg {fill:var(--slg-primary,#1aafc1);stroke:var(--slg-primary,#1aafc1);}
/* gallery */
.slg-pdp-stage {position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:3px;background:#f4f4f4;}
.slg-pdp-photo {display:block;width:100%;height:100%;} .slg-pdp-photo[hidden] {display:none;} .slg-pdp-photo img {width:100%;height:100%;object-fit:cover;border-radius:3px;}
.slg-pdp-stage button {border:0;cursor:pointer;}
.slg-pdp-prev,.slg-pdp-next {position:absolute;top:50%;transform:translateY(-50%);width:48px;height:60px;display:grid;place-items:center;background:none;color:#fff;font-size:34px;line-height:1;filter:drop-shadow(0 1px 4px rgba(0,0,0,.55));z-index:3;}
.slg-pdp-prev {left:0;} .slg-pdp-next {right:0;}
.slg-pdp-all,.slg-pdp-count {position:absolute;bottom:12px;z-index:3;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;border-radius:3px;line-height:1;}
.slg-pdp-all {left:12px;padding:9px 12px;min-height:38px;background:rgba(255,255,255,.94);color:#333;} .slg-pdp-all:hover {background:#fff;}
.slg-pdp-count {right:12px;padding:6px 10px;background:rgba(0,0,0,.62);color:#fff;}
.slg-pdp-thumbs {display:flex;gap:10px;margin-top:10px;overflow-x:auto;scroll-behavior:smooth;padding-bottom:4px;scrollbar-width:none;} .slg-pdp-thumbs::-webkit-scrollbar {display:none;}
.slg-pdp-thumbs button {flex:0 0 calc((100% - 30px)/4);aspect-ratio:4/3;padding:0;border:2px solid transparent;border-radius:3px;overflow:hidden;background:#f4f4f4;opacity:.65;cursor:pointer;}
.slg-pdp-thumbs button[aria-current="true"] {border-color:var(--slg-primary,#1aafc1);opacity:1;} .slg-pdp-thumbs button:hover {opacity:1;}
.slg-pdp-thumbs img {width:100%;height:100%;object-fit:cover;display:block;}
.slg-pdp-caption {font-size:12px;color:#848484;margin:10px 0 0;letter-spacing:0;line-height:1.6;background:none;border:0;padding:0;}
.slg-pdp-multi {font-size:12px;letter-spacing:1px;text-transform:uppercase;margin:16px 0 0;color:#333;}
/* sections */
.slg-pdp-section {padding:26px 0;border-top:1px solid #e5e5e5;letter-spacing:0;}
#overview.slg-pdp-section {border-top:0;}
.slg-pdp-section h2 {font-size:24px;font-weight:400;letter-spacing:1px;margin:0 0 14px;color:#333;text-transform:none;line-height:1.3;}
.slg-pdp-section h3 {font-size:15px;font-weight:700;letter-spacing:1px;text-transform:uppercase;margin:0 0 8px;color:#333;line-height:1.4;}
.slg-pdp-section h3.slg-pdp-sub {margin-top:18px;}
.slg-pdp-section p {font-size:15px;line-height:1.7;color:#4a4a4a;margin:0 0 12px;max-width:68ch;letter-spacing:0;}
.slg-pdp-section p.slg-pdp-note,.slg-pdp-note {font-size:12px;color:#848484;line-height:1.6;max-width:78ch;}
.slg-pdp-checkinout {font-size:13px;color:#848484;margin-top:10px;} .slg-pdp-checkinout .sep,.slg-rel-meta .sep {margin:0 6px;color:#ccc;}
/* room types table */
.slg-rt-min {font-size:12px;letter-spacing:1px;text-transform:uppercase;color:#848484;margin:0 0 14px;}
.slg-rt-bandsel {display:none;grid-template-columns:repeat(2,1fr);gap:6px;margin:0 0 16px;}
.slg-rt-bandsel button {min-height:44px;padding:9px 6px;border:1px solid #ccc;border-radius:3px;font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:#333;background:#fff;line-height:1.25;cursor:pointer;}
.slg-rt-bandsel button[aria-pressed="true"] {background:var(--slg-primary,#1aafc1);border-color:var(--slg-primary,#1aafc1);color:#fff;}
.slg-rt-wrap {width:100%;}
.slg-rates-table {width:100%;max-width:100%;table-layout:fixed;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums;margin:0;}
.slg-rates-table caption {caption-side:top;text-align:left;font-size:12px;line-height:1.6;color:#848484;padding:0 0 14px;max-width:78ch;}
.slg-rates-table thead th {background:var(--slg-primary,#1aafc1);color:#fff;font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;padding:13px 8px;vertical-align:middle;border:0;text-align:left;}
.slg-rates-table thead th.c-name {border-radius:3px 0 0 3px;padding-left:16px;}
.slg-rates-table thead th.c-media {border-radius:0 3px 3px 0;text-align:right;padding-right:16px;}
.slg-rates-table thead .bh-num {display:block;font-size:13px;line-height:1.2;} .slg-rates-table thead .bh-lab {display:block;font-size:10px;font-weight:600;opacity:.8;letter-spacing:.6px;line-height:1.3;}
.slg-rates-table thead .c-rate.is-sel {background:var(--slg-primary-hover,#158d9c);box-shadow:inset 0 3px 0 var(--slg-primary-deep,#0d7d8c);}
.slg-rates-table tbody th,.slg-rates-table tbody td {padding:12px 8px;border-bottom:1px solid #e5e5e5;text-align:left;vertical-align:middle;overflow-wrap:break-word;background:none;}
.slg-rates-table tbody tr:last-child th,.slg-rates-table tbody tr:last-child td {border-bottom:1px solid #ccc;}
.slg-rates-table tbody tr:hover {background:#f4f4f4;}
.slg-rates-table .num {text-align:right;}
.slg-rates-table tbody .c-rate.is-sel {background:rgba(var(--slg-primary-rgb,26,175,193),.10);font-weight:700;color:#333;}
.slg-rates-table .c-name {width:42%;padding-left:16px;padding-right:12px;}
.slg-rates-table .c-rate {width:12%;} .slg-rates-table tbody .c-rate {color:#4a4a4a;}
.slg-rates-table .c-media {width:10%;padding-left:8px;padding-right:16px;text-align:right;}
.slg-rt-none {color:#ccc;}
.slg-rt-name {display:block;font-size:14px;font-weight:700;line-height:1.35;color:#333;}
.slg-rt-facts {display:block;font-size:12.5px;font-weight:400;color:#6a6a6a;margin:4px 0 0;line-height:1.5;} .slg-rt-facts > span {white-space:nowrap;} .slg-rt-facts .sep {margin:0 7px;color:#ccc;}
.slg-media-btn {display:inline-flex;align-items:center;gap:5px;min-height:40px;padding:6px 8px;border:1px solid #ccc;border-radius:3px;color:var(--slg-primary,#1aafc1);background:#fff;line-height:1;text-decoration:none;}
.slg-media-btn:hover {border-color:var(--slg-primary,#1aafc1);background:#f4f4f4;} .slg-media-btn .mb-n {font-size:11px;font-weight:700;color:#848484;}
/* amenities */
.slg-am-group {margin-bottom:20px;} .slg-am-group h3 {margin:0 0 10px;}
.slg-am-list {list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px 18px;}
.slg-am-list li {font-size:14px;color:#4a4a4a;display:flex;gap:9px;align-items:flex-start;line-height:1.5;margin:0;padding:0;}
.slg-am-list li::before {content:"";flex:0 0 auto;width:6px;height:6px;margin-top:8px;background:var(--slg-primary,#1aafc1);}
/* location */
.slg-stations {list-style:none;margin:12px 0 0;padding:0;}
.slg-stations li {display:flex;gap:10px;align-items:flex-start;font-size:14px;color:#4a4a4a;line-height:1.6;padding:5px 0;margin:0;}
.slg-station-ico {flex:0 0 auto;width:18px;height:18px;margin-top:3px;}
.slg-map-panel {position:relative;margin-top:16px;max-width:640px;background:#eef1ec;border:1px solid #e5e5e5;border-radius:3px;overflow:hidden;}
.slg-map-panel #mapboxMap.single_property {height:400px;width:100%;}
.slg-map-panel--unavailable {min-height:180px;padding:10px;}
.slg-map-note {display:inline-block;background:rgba(255,255,255,.94);border:1px solid #e5e5e5;border-radius:3px;padding:6px 10px;font-size:12px;color:#848484;margin:0;max-width:78%;line-height:1.5;}
.slg-map-note strong {display:block;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#333;margin-bottom:2px;}
/* accordions (directions, booking terms) */
.slg-pdp-acc {margin-top:16px;}
.slg-pdp-acc-toggle {width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;border:0;border-top:1px solid #e5e5e5;border-bottom:1px solid #e5e5e5;background:none;font-size:13px;font-weight:700;letter-spacing:1px;text-transform:uppercase;text-align:left;color:#333;padding:0;cursor:pointer;}
.slg-pdp-acc-toggle > span {margin:0;} .slg-pdp-acc-toggle > i {color:#848484;transition:transform .2s ease;} .slg-pdp-acc-toggle[aria-expanded="true"] > i {transform:rotate(180deg);}
.slg-pdp-acc-panel {display:none;padding:18px 0 4px;} .slg-pdp-acc-toggle[aria-expanded="true"] + .slg-pdp-acc-panel {display:block;}
.slg-pdp-acc-panel h3 {display:none;}
.slg-dir-intro {font-size:14px;line-height:1.65;color:#4a4a4a;margin:0 0 14px;max-width:68ch;}
.slg-pdp-acc-panel .mapbox-search form {display:flex;flex-wrap:wrap;gap:10px;align-items:center;}
.slg-pdp-acc-panel .mapbox-search input[type=text] {flex:1 1 240px;min-width:0;min-height:48px;border:1px solid #ccc;border-radius:3px;padding:10px 12px;font-size:15px;margin:0;}
.slg-pdp-acc-panel .mapbox-direct-radio {position:relative;padding:0 14px;min-height:48px;display:flex;align-items:center;font-size:12px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;cursor:pointer;border:1px solid #ccc;border-radius:3px;color:#333;margin:0;}
.slg-pdp-acc-panel .mapbox-direct-radio.selected {background:var(--slg-primary,#1aafc1);border-color:var(--slg-primary,#1aafc1);color:#fff;}
.slg-pdp-acc-panel .mapbox-search input[type=radio] {position:absolute;opacity:0;width:1px;height:1px;}
.slg-pdp-acc-panel .mapbox-search input[type=submit] {min-height:48px;padding:0 18px;background:#333;color:#fff;border:0;border-radius:3px;font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;}
.terms_and_conditions p,.slg-pdp-acc-panel p {font-size:14px;line-height:1.7;color:#4a4a4a;max-width:70ch;}
.slg-terms-decl {margin-top:18px;padding-top:16px;border-top:1px solid #e5e5e5;} .slg-terms-label {display:block;font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:#848484;}
.slg-terms-pdf a,.slg-terms-decl a {font-weight:700;letter-spacing:1px;color:var(--slg-primary,#1aafc1);text-decoration:none;}
/* related rail */
.slg-rel-head {display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px;} .slg-rel-head h2 {margin:0;}
.slg-rel-nav {display:flex;gap:6px;}
.slg-rel-arrow {width:44px;height:44px;display:grid;place-items:center;border:1px solid #ccc;border-radius:3px;color:#333;background:#fff;font-size:18px;padding:0;cursor:pointer;}
.slg-rel-arrow:hover {border-color:var(--slg-primary,#1aafc1);color:var(--slg-primary,#1aafc1);}
.slg-rel-grid {display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;padding-bottom:6px;scrollbar-width:none;} .slg-rel-grid::-webkit-scrollbar {display:none;}
.slg-rel {position:relative;flex:0 0 calc(50% - 12px);min-width:0;scroll-snap-align:start;}
.slg-rel-media {display:block;aspect-ratio:16/10;border-radius:3px;overflow:hidden;background:#f4f4f4;} .slg-rel-media img {width:100%;height:100%;object-fit:cover;display:block;border-radius:3px;}
.slg-rel-info {font-size:12px;letter-spacing:1px;text-transform:uppercase;color:#848484;margin:12px 0 0;padding-right:52px;}
.slg-rel h3 {font-size:16px;font-weight:600;letter-spacing:1px;text-transform:uppercase;margin:4px 0 0;line-height:1.25;padding-right:52px;} .slg-rel h3 a {color:#333;text-decoration:none;} .slg-rel h3 a:hover {color:var(--slg-primary,#1aafc1);}
.slg-rel-meta {font-size:12px;letter-spacing:1px;text-transform:uppercase;margin:10px 0 0;color:#333;}
.slg-rel-fav {position:absolute;top:8px;right:8px;width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:50%;background:rgba(255,255,255,.92);color:#333;padding:0;cursor:pointer;} .slg-rel-fav svg {width:19px;height:19px;} .slg-rel-fav:hover {background:#fff;}
/* enquiry card */
.slg-pdp-aside .slg-enq {border:1px solid #ccc;border-radius:3px;padding:20px;background:#fff;position:static;top:auto;width:100%;}
.slg-enq .nights {padding:0;border:0;background:none;}
.slg-enq .pricepernight,.slg-enq-head {display:block;background:none;padding:0;border:0;color:#333;margin:0;height:auto;min-height:0;}
.slg-enq .pricepernight i {display:none;}
.slg-enq .pricepernight > div,.slg-enq .pricepernight h2,.slg-enq .pricepernight p {display:block;position:static;width:auto;text-align:left;}
.slg-enq .nights,.slg-enq .pricepernight {text-align:left;}
.slg-enq input.datepicker,.slg-enq input.roinput {background-image:none!important;cursor:pointer;}
.slg-enq-title {font-size:24px;font-weight:400;letter-spacing:1px;margin:0 0 2px;color:#333;line-height:1.3;}
.slg-enq .pricepernight p.slg-enq-from {font-size:14px;color:#848484;margin:0 0 18px;letter-spacing:0;text-transform:none;font-weight:400;}
.slg-enq .gform_wrapper {margin:0;} .slg-enq .gform_wrapper form {background:transparent!important;padding:0!important;}
.slg-enq .gform_fields {display:grid!important;grid-template-columns:repeat(8,minmax(0,1fr));gap:14px 12px;padding:0!important;margin:0!important;background:transparent!important;}
.slg-enq .gform_fields:before,.slg-enq .gform_fields:after {display:none!important;}
.slg-enq .gform_fields > .gfield {grid-column:span 4;width:auto!important;float:none!important;clear:none!important;margin:0!important;padding:0!important;min-width:0;}
.slg-enq .gform_fields > #field_12_9 {grid-column:span 5;} .slg-enq .gform_fields > #field_12_10 {grid-column:span 3;} .slg-enq .gform_fields > #field_12_8 {grid-column:span 8;}
/* the same layout by role, because the form's id and field ids vary per site (lib/enquiry.php adds these classes) */
.slg-enq .gform_fields > .gfield.slg-f-room {grid-column:span 5;} .slg-enq .gform_fields > .gfield.slg-f-guests {grid-column:span 3;} .slg-enq .gform_fields > .gfield.slg-f-email,.slg-enq .gform_fields > .gfield.slg-f-message {grid-column:span 8;}
.slg-enq .gform_fields > .field_admin_only,.slg-enq .gform_fields > .gform_hidden {display:none!important;}
.slg-enq .gfield_label {display:block;font-size:11px!important;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:#848484;margin:0 0 6px!important;line-height:1.5!important;min-height:0!important;}
.slg-enq .gfield_required {color:#c0392b;margin-left:2px;}
.slg-enq .ginput_container {margin:0!important;padding:0!important;}
.slg-enq input:not([type=submit]):not([type=hidden]):not([type=radio]):not([type=checkbox]),.slg-enq select {width:100%;min-height:46px;height:46px!important;border:1px solid #ccc!important;border-radius:3px;padding:10px 12px!important;font-size:15px!important;background:#fff!important;color:#333;box-sizing:border-box;}
.slg-enq .gfield_error input,.slg-enq .gfield_error select {border-color:#c0392b!important;}
.slg-enq .validation_message,.slg-enq .gfield_validation_message {font-size:12px;color:#c0392b;margin:5px 0 0;padding:0;background:none;border:0;line-height:1.4;}
.slg-enq .validation_error,.slg-enq .gform_validation_errors {font-size:13px;color:#c0392b;margin:0 0 12px;padding:0;border:0;background:none;box-shadow:none;}
.slg-enq-min {font-size:13px;color:#333;margin:4px 0 14px;padding:0;border:0;text-align:left;} /* 8 Oct: no rule under the last field (Charles) */
.slg-enq .gform_footer {padding:18px 0 0!important;margin:0!important;}
.slg-enq .slg-enq-min + .gform_footer {padding-top:0!important;}
.slg-enq input[type=submit],.slg-enq .gform_footer .gform_button {display:block;width:100%;min-height:46px;height:auto;padding:12px 16px;border:0!important;border-radius:3px;background:var(--slg-primary,#1aafc1)!important;color:#fff;font-size:13px;font-weight:700;letter-spacing:1px;text-transform:uppercase;line-height:1.3;cursor:pointer;margin:0;}
.slg-enq input[type=submit]:hover,.slg-enq .gform_footer .gform_button:hover {background:var(--slg-primary-hover,#158d9c)!important;}
.slg-enq .ginput_container_date {position:relative;} .slg-enq .ginput_container_date::after {content:"\f073"!important;font-family:FontAwesome;position:absolute;right:12px;top:50%;transform:translateY(-50%);color:#848484;pointer-events:none;}
.slg-enq .gform-datepicker-toggle {display:none;}
.slg-enq .whatsappPdp-container {padding:0;margin:0;}
.slg-enq-wa,.slg-enq .whatsappPdp-button {display:flex;align-items:center;justify-content:center;width:100%;min-height:46px;margin:10px 0 0;padding:0;background:#25d366;color:#fff;border-radius:3px;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:1px;text-decoration:none;}
.slg-enq-wa:hover {background:#1fb855;color:#fff;}
.slg-enq-links {display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px;flex-wrap:wrap;}
.slg-enq-tel {font-size:13px;font-weight:600;letter-spacing:.6px;color:#333;text-decoration:none;min-height:44px;line-height:44px;}
.slg-enq-terms {font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--slg-primary,#1aafc1);text-decoration:none;min-height:44px;line-height:44px;}
.slg-enq .copyright.slg-enq-note {font-size:12px;color:#848484;margin:6px 0 0;line-height:1.55;padding:0;letter-spacing:0;}
.slg-enq .subtotal {display:none;}
.slg-enq .modal-cal {z-index:5;}
/* mobile block under the facts */
.single-property .mobile_pdp_info .btn_group {display:flex;flex-direction:column;gap:10px;margin:16px 0 0;}
.single-property .mobile_pdp_info .btn {margin:0;}
@media(max-width:1199px){.slg-pdp-grid {grid-template-columns:minmax(0,1fr) 360px;column-gap:28px;}}
@media(max-width:991px){
.slg-pdp-grid {display:block;}
.slg-pdp-aside {display:none;}
.slg-am-list {grid-template-columns:repeat(2,1fr);}
.slg-pdp-identity h1 {font-size:26px;}
}
@media(max-width:767px){
.slg-pdp.container.no-top {padding-top:100px;}
.slg-pdp-crumbs {display:none;}
.slg-pdp-identity h1 {font-size:22px;}
.slg-pdp-section h2 {font-size:20px;}
.slg-pdp-stage {aspect-ratio:4/3;}
.slg-rt-bandsel {display:grid;}
.slg-rates-table .c-rate {display:none;} .slg-rates-table .c-rate.m-show {display:table-cell;}
.slg-rates-table .c-name {width:55%;padding-left:10px;} .slg-rates-table .c-rate {width:25%;font-size:15px;} .slg-rates-table .c-media {width:20%;padding-right:10px;}
.slg-rates-table thead th {padding:11px 8px;} .slg-rates-table thead th.c-name {padding-left:10px;} .slg-rates-table thead th.c-media {padding-right:10px;}
.slg-am-list {grid-template-columns:1fr;}
.slg-rel-grid {gap:14px;} .slg-rel {flex:0 0 82%;} .slg-rel-nav {display:none;}
.slg-map-panel #mapboxMap.single_property {height:260px;}
}
/* ---- 8 Oct 2026, Charles's 12-point review ---- */
/* 1. image disclaimer: plain muted text under the thumbnails, no grey bar */
.slg-pdp p.galleryNotification.slg-pdp-caption {background:none!important;padding:0;border:0;border-radius:0;margin:10px 0 0;position:static;z-index:auto;font-size:12px;line-height:1.6;color:#848484;letter-spacing:0;}
/* 2. facts strip: the design's breathing room (legacy .sect.info rules outrank journey.css) */
.slg-pdp .columns-section.rowflex.sect.info.slg-facts {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;justify-content:start;padding:26px 0;margin:16px 0 0;width:100%;border-top:1px solid #e5e5e5;border-bottom:1px solid #e5e5e5;}
.slg-pdp .columns-section.rowflex.sect.info.slg-facts p {display:flex;align-items:center;gap:12px;margin:0;line-height:1.4;text-align:left;font-size:15px;color:#333;}
.slg-pdp .columns-section.rowflex.sect.info.slg-facts .slg-fact-icon {width:40px;height:36px;color:#333;flex:0 0 auto;}
.slg-pdp .columns-section.rowflex.sect.info.slg-facts .slg-fact-label {display:block;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#848484;margin-bottom:2px;}
/* 3. one divider between sections: accordions carry their own top line, the next section none */
.slg-pdp-acc {margin-top:16px;border-top:1px solid #e5e5e5;border-bottom:1px solid #e5e5e5;}
.slg-pdp-acc-toggle {border:0;}
.slg-pdp-section:has(> .slg-pdp-acc:last-child) {padding-bottom:0;}
#booking-terms.slg-pdp-section {border-top:0;padding:0;}
#booking-terms .slg-pdp-acc {margin-top:0;border-top:0;}
#booking-terms + .slg-pdp-related,.slg-pdp-section:has(> .slg-pdp-acc:last-child) + .slg-pdp-section {border-top:0;}
.slg-pdp-related {padding-top:30px;padding-bottom:20px;}
/* 5. the enquiry card stops clear of the footer */
.slg-pdp.container.no-top {padding-bottom:64px;}
/* 9. banners darken on scroll but never move: no zoom, and nothing can peek below the overlay */
.content.about > .block.banner,body.search .content > .block.banner {overflow:hidden;}
.block.banner > img {zoom:1!important;transform:none!important;}
/* ---- 8 Oct 2026, property directions: one coherent section across the content column (reference 19.31.22) ---- */
.slg-dir {margin:0;}
.slg-dir-form {display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px;align-items:end;margin:0 0 14px;}
.slg-dir-field {min-width:0;}
.slg-dir-field label {display:block;margin:0 0 6px;font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:#848484;}
.slg-dir-field input[type=text] {box-sizing:border-box;width:100%;min-height:48px;margin:0;padding:10px 12px;border:1px solid #ccc;border-radius:3px;background:#fff;font-size:15px;letter-spacing:0;color:#333;}
.slg-dir-field input[type=text]:disabled {background:#f4f4f4;color:#848484;}
.slg-dir-modes {display:flex;margin:0;padding:0;border:1px solid #ccc;border-radius:3px;overflow:hidden;min-width:0;}
.slg-dir-modes legend {position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.slg-dir-mode {position:relative;margin:0;flex:0 0 auto;}
.slg-dir-mode input {position:absolute;opacity:0;width:1px;height:1px;margin:0;}
.slg-dir-mode span {display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 14px;border-right:1px solid #ccc;background:#fff;font-size:12px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:#333;cursor:pointer;white-space:nowrap;}
.slg-dir-mode:last-child span {border-right:0;}
.slg-dir-mode svg {width:18px;height:18px;flex:0 0 auto;}
.slg-dir-mode input:checked + span {background:var(--slg-primary,#1aafc1);color:#fff;}
.slg-dir-mode input:focus-visible + span {outline:2px solid var(--slg-primary-deep,#0d7d8c);outline-offset:-3px;}
.slg-dir-mode input:disabled + span {color:#848484;cursor:not-allowed;}
.slg-dir-submit {min-height:48px;margin:0;padding:0 18px;border:0;border-radius:3px;background:var(--slg-primary,#1aafc1);color:#fff;font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;white-space:nowrap;cursor:pointer;}
.slg-dir-submit:hover {background:var(--slg-primary-hover,#158d9c);}
.slg-dir-submit:disabled {background:#ccc;cursor:not-allowed;}
.slg-dir-status {margin:0 0 12px;font-size:13px;line-height:1.6;letter-spacing:0;color:#848484;}
.slg-dir-status[hidden] {display:none;}
.slg-dir-status.is-error {color:#b3261e;}
.slg-dir-map,#mapbox-directions,#mapbox-directions.mapboxgl-map {position:relative;top:auto;right:auto;bottom:auto;left:auto;width:100%;max-width:none;height:420px;margin:0;border:1px solid #e5e5e5;border-radius:3px;background:#eef1ec;overflow:hidden;}
.slg-dir-result {margin-top:18px;}
.slg-dir-result[hidden] {display:none;}
.slg-dir-summary {display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid #e5e5e5;border-left:3px solid var(--slg-primary,#1aafc1);border-radius:3px;background:#f4f4f4;}
.slg-dir-summary__icon {display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#fff;color:var(--slg-primary,#1aafc1);flex:0 0 auto;}
.slg-dir-summary__icon svg {width:20px;height:20px;}
.slg-dir-summary b {display:block;font-size:18px;font-weight:600;line-height:1.3;letter-spacing:0;color:#333;}
.slg-dir-summary__meta {display:block;font-size:13px;line-height:1.5;letter-spacing:0;color:#4a4a4a;}
.slg-dir-steps {margin:14px 0 0;padding:0 0 0 28px;font-size:14px;line-height:1.6;letter-spacing:0;color:#4a4a4a;}
.slg-dir-steps li {margin:0;padding:0;}
.slg-dir-step {display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:9px 0;border-bottom:1px solid #e5e5e5;}
.slg-dir-steps li:last-child .slg-dir-step {border-bottom:0;}
.slg-dir-step__dist {flex:0 0 auto;font-size:12px;letter-spacing:.3px;color:#848484;white-space:nowrap;}
@media (max-width:767px) {
.slg-dir-form {grid-template-columns:1fr;}
.slg-dir-modes {width:100%;}
.slg-dir-mode {flex:1 1 0;}
.slg-dir-mode span {width:100%;justify-content:center;padding:0 6px;}
.slg-dir-map,#mapbox-directions,#mapbox-directions.mapboxgl-map {height:300px;}
.slg-dir-step {flex-direction:column;align-items:flex-start;gap:2px;}
}
/* ---- 8 Oct 2026, all-properties map: the shared preview card sits inside the map pane ---- */
.page-template-overview-map .map,.page-template-templatesoverview-map-php .map {position:relative;}
/* ---- 8 Oct 2026, Main homepage visual reconciliation (prototype 4, Main variant; reference PDF 3d007238-…). ----
Scoped to the Main homepage (body.home:is(.slg-main-site,.slg-live-site)) so inner pages, search, property pages and the Live homepage are
untouched; the footer block at the end is the one site-wide exception and says so. The prototype's grammar, applied to
every row including the approved extra content: Open Sans 15px/1.65 with no tracking; light (300) headings on the
prototype's clamp scale; a 1180px measure; 68px bands only where a row carries a background, white rows flowing from
the row above (the prototype's `.sec.tight`); 12px letterspaced uppercase eyebrows and links; flat, square,
line-separated cards; teal primary / outlined secondary buttons. Pairs with
scripts/section-demo-data/homepage-visual-reconciliation-2026-10-08.php, which sets the row order, chrome and hooks. */
body.home:is(.slg-main-site,.slg-live-site) {font-size:15px;line-height:1.65;letter-spacing:normal;}
body.home:is(.slg-main-site,.slg-live-site) .slg-section .container {width:100%;max-width:1200px;}
/* rhythm: one band size; tight rows have no top padding and take the gap from the row above */
body.home:is(.slg-main-site,.slg-live-site) .slg-section--space-tight,body.home:is(.slg-main-site,.slg-live-site) .slg-section--space-prototype-tight,body.home:is(.slg-main-site,.slg-live-site) .slg-section--space-normal,body.home:is(.slg-main-site,.slg-live-site) .slg-section--space-block {padding-top:clamp(44px,5.5vw,68px);padding-bottom:clamp(44px,5.5vw,68px);margin-top:0;margin-bottom:0;}
body.home:is(.slg-main-site,.slg-live-site) .slg-section--space-tight,body.home:is(.slg-main-site,.slg-live-site) .slg-section--space-prototype-tight {padding-top:0;}
body.home:is(.slg-main-site,.slg-live-site) .slg-section--shade-light {background-color:#f6f6f6;}
/* type scale */
body.home:is(.slg-main-site,.slg-live-site) .slg-pack-content,body.home:is(.slg-main-site,.slg-live-site) .slg-pack-content p,body.home:is(.slg-main-site,.slg-live-site) .slg-pack-content li,body.home:is(.slg-main-site,.slg-live-site) .slg-pack-content div,body.home:is(.slg-main-site,.slg-live-site) .slg-pack-content .slg-pack-card,body.home:is(.slg-main-site,.slg-live-site) .slg-pack-content .slg-pack-callout {font-size:16px;letter-spacing:normal;line-height:1.65;}
body.home:is(.slg-main-site,.slg-live-site) .slg-pack-content p {max-width:41em;}
body.home:is(.slg-main-site,.slg-live-site) .slg-pack-content .slg-pack-eyebrow {font-size:12px;letter-spacing:.16em;line-height:1.65;color:#7c7c7c;margin-bottom:11px;}
body.home:is(.slg-main-site,.slg-live-site) .slg-media-text__copy .slg-pack-content h2 {font-size:clamp(23px,2.9vw,32px);font-weight:400;letter-spacing:normal;line-height:1.25;margin:0 0 16px;}
body.home:is(.slg-main-site,.slg-live-site) .slg-media-text__copy .slg-pack-content h3 {font-weight:400;letter-spacing:normal;line-height:1.25;}
body.home:is(.slg-main-site,.slg-live-site) .slg-property-grid-heading,body.home:is(.slg-main-site,.slg-live-site) .slg-area-tiles-heading,body.home:is(.slg-main-site,.slg-live-site) .slg-group-rail-heading {font-weight:400;}
body.home:is(.slg-main-site,.slg-live-site) .slg-group-rail-eyebrow {font-weight:600;margin-bottom:11px;}
/* buttons: the prototype's .btn / .btn-teal; the second of a pair is the outlined secondary */
body.home:is(.slg-main-site,.slg-live-site) .slg-media-text__copy a.slg-pack-button,body.home:is(.slg-main-site,.slg-live-site) .slg-pack-content a.slg-pack-button {min-height:0;padding:13px 26px;border:1px solid var(--slg-primary,#1aafc1);border-radius:0;background:var(--slg-primary,#1aafc1);color:#fff;font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;line-height:1.5;transition:.18s;}
body.home:is(.slg-main-site,.slg-live-site) .slg-media-text__copy a.slg-pack-button:hover,body.home:is(.slg-main-site,.slg-live-site) .slg-media-text__copy a.slg-pack-button:focus {border-color:var(--slg-primary-hover,#158fa0);background:var(--slg-primary-hover,#158fa0);color:#fff;}
body.home:is(.slg-main-site,.slg-live-site) .slg-pack-content .slg-pack-button ~ .slg-pack-button {border-color:#333;background:none;color:#333;}
body.home:is(.slg-main-site,.slg-live-site) .slg-pack-content .slg-pack-button ~ .slg-pack-button:hover,body.home:is(.slg-main-site,.slg-live-site) .slg-pack-content .slg-pack-button ~ .slg-pack-button:focus {background:#333;border-color:#333;color:#fff;}
body.home:is(.slg-main-site,.slg-live-site) .slg-pack-content .slg-pack-card--dark .slg-pack-button ~ .slg-pack-button {border-color:#fff;color:#fff;background:none;}
body.home:is(.slg-main-site,.slg-live-site) .slg-pack-content .slg-pack-card--dark .slg-pack-button ~ .slg-pack-button:hover,body.home:is(.slg-main-site,.slg-live-site) .slg-pack-content .slg-pack-card--dark .slg-pack-button ~ .slg-pack-button:focus {background:#fff;border-color:#fff;color:#333;}
/* callouts are a quiet line, not a box */
body.home:is(.slg-main-site,.slg-live-site) .slg-pack-content .slg-pack-callout {margin:22px 0 0;padding:0;border:0;border-radius:0;background:none;}
body.home:is(.slg-main-site,.slg-live-site) .slg-pack-content .slg-pack-callout > strong {margin:0;font-weight:400;font-style:italic;color:#555;}
/* M04 two ways: centred head with the teal rule, the split panes, the note beneath */
body.home:is(.slg-main-site,.slg-live-site) .slg-pack-content > div:has(> .slg-pack-split) > div:first-child {text-align:center;max-width:40em;margin:0 auto 32px;}
body.home:is(.slg-main-site,.slg-live-site) .slg-pack-content > div:has(> .slg-pack-split) > div:first-child p {margin:0 auto;color:#555;}
body.home:is(.slg-main-site,.slg-live-site) .slg-media-text__copy .slg-pack-content > div:has(> .slg-pack-split) > div:first-child h2,body.home:is(.slg-main-site,.slg-live-site) .slg-media-text__copy .slg-pack-content .slg-pack-ctaband > h2 {margin-bottom:0;}
body.home:is(.slg-main-site,.slg-live-site) .slg-pack-content > div:has(> .slg-pack-split) > div:first-child h2::after,body.home:is(.slg-main-site,.slg-live-site) .slg-pack-ctaband > h2::after {content:"";display:block;width:44px;height:2px;background:var(--slg-primary,#1aafc1);margin:16px auto;}
body.home:is(.slg-main-site,.slg-live-site) .slg-pack-content .slg-pack-split {margin:0;}
body.home:is(.slg-main-site,.slg-live-site) .slg-media-text__copy .slg-pack-content .slg-pack-split > .slg-pack-card h3 {font-size:23px;margin:0 0 12px;}
body.home:is(.slg-main-site,.slg-live-site) .slg-pack-content .slg-pack-split > .slg-pack-card p {font-size:15.5px;}
body.home:is(.slg-main-site,.slg-live-site) .slg-pack-content .slg-pack-split > .slg-pack-card:not(.slg-pack-card--dark) p {color:#555;}
body.home:is(.slg-main-site,.slg-live-site) .slg-pack-content .slg-pack-split > .slg-pack-card li {font-size:14px;}
body.home:is(.slg-main-site,.slg-live-site) .slg-pack-content > div:has(> .slg-pack-split) > .slg-pack-callout,body.home:is(.slg-main-site,.slg-live-site) .slg-pack-ctaband > .slg-pack-callout {text-align:center;}
/* M07 statement: centred light heading on a 20em measure, two columns of muted justified text */
body.home:is(.slg-main-site,.slg-live-site) .slg-pack-content .slg-pack-statement {text-align:center;}
body.home:is(.slg-main-site,.slg-live-site) .slg-media-text__copy .slg-pack-content .slg-pack-statement h2 {font-size:clamp(21px,2.6vw,29px);max-width:20em;margin:0 auto 36px;}
body.home:is(.slg-main-site,.slg-live-site) .slg-pack-content .slg-pack-statement p {max-width:none;column-count:2;column-gap:46px;text-align:justify;color:#555;}
/* stats strip: the prototype's ruled, centred reasons grammar */
body.home:is(.slg-main-site,.slg-live-site) .slg-pack-content .slg-pack-reasons {gap:0;border-top:1px solid #e1e1e1;margin:0;}
body.home:is(.slg-main-site,.slg-live-site) .slg-pack-content .slg-pack-reasons .slg-pack-card {padding:26px 15px;border:0;border-right:1px solid #e1e1e1;border-radius:0;background:none;text-align:center;}
body.home:is(.slg-main-site,.slg-live-site) .slg-pack-content .slg-pack-reasons .slg-pack-card:last-child {border-right:0;}
body.home:is(.slg-main-site,.slg-live-site) .slg-pack-content .slg-pack-reasons .slg-pack-card > strong {font-size:13px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;margin:0 0 7px;}
body.home:is(.slg-main-site,.slg-live-site) .slg-pack-content .slg-pack-reasons .slg-pack-card > span {display:block;font-size:13.5px;line-height:1.55;color:#555;}
/* solutions: the prototype's ruled cell grid (steps / reasons), small uppercase titles, muted text, letterspaced links */
body.home:is(.slg-main-site,.slg-live-site) .slg-pack-content .slg-pack-cells {gap:0;border-top:1px solid #e1e1e1;border-left:1px solid #e1e1e1;margin:34px 0 28px;}
body.home:is(.slg-main-site,.slg-live-site) .slg-pack-content .slg-pack-cells .slg-pack-card {display:flex;flex-direction:column;padding:26px 24px;border:0;border-right:1px solid #e1e1e1;border-bottom:1px solid #e1e1e1;border-radius:0;background:none;}
body.home:is(.slg-main-site,.slg-live-site) .slg-media-text__copy .slg-pack-content .slg-pack-cells h3 {font-size:13px;letter-spacing:.09em;text-transform:uppercase;font-weight:600;line-height:1.5;margin:0 0 7px;}
body.home:is(.slg-main-site,.slg-live-site) .slg-pack-content .slg-pack-cells p {font-size:15px;color:#555;margin:0 0 14px;max-width:none;}
body.home:is(.slg-main-site,.slg-live-site) .slg-pack-content .slg-pack-cells p:last-child {margin:auto 0 0;}
/* case studies: the prototype's three-column grammar (M10) */
body.home:is(.slg-main-site,.slg-live-site) .slg-pack-content .slg-pack-cols {gap:40px;margin:34px 0 28px;}
body.home:is(.slg-main-site,.slg-live-site) .slg-pack-content .slg-pack-cols .slg-pack-card {padding:0;border:0;border-radius:0;background:none;}
body.home:is(.slg-main-site,.slg-live-site) .slg-media-text__copy .slg-pack-content .slg-pack-cols h3 {font-size:27px;letter-spacing:.02em;text-transform:uppercase;font-weight:400;line-height:1.25;margin:2px 0 14px;}
body.home:is(.slg-main-site,.slg-live-site) .slg-pack-content .slg-pack-cols p {font-size:15.5px;color:#555;max-width:none;}
body.home:is(.slg-main-site,.slg-live-site) .slg-pack-content .slg-pack-cells a:not(.slg-pack-button),body.home:is(.slg-main-site,.slg-live-site) .slg-pack-content .slg-pack-cols a:not(.slg-pack-button) {display:inline-block;font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;line-height:1.65;color:#7c7c7c;text-decoration:none;border-bottom:1px solid #e1e1e1;padding-bottom:3px;}
body.home:is(.slg-main-site,.slg-live-site) .slg-pack-content .slg-pack-cells a:not(.slg-pack-button):hover,body.home:is(.slg-main-site,.slg-live-site) .slg-pack-content .slg-pack-cells a:not(.slg-pack-button):focus,body.home:is(.slg-main-site,.slg-live-site) .slg-pack-content .slg-pack-cols a:not(.slg-pack-button):hover,body.home:is(.slg-main-site,.slg-live-site) .slg-pack-content .slg-pack-cols a:not(.slg-pack-button):focus {color:var(--slg-primary,#1aafc1);border-color:var(--slg-primary,#1aafc1);}
/* M12 closing call to action: a lined soft band, centred, the two routes side by side */
body.home:is(.slg-main-site,.slg-live-site) .slg-section--media-and-text:has(.slg-pack-ctaband) {border-top:1px solid #e1e1e1;border-bottom:1px solid #e1e1e1;}
body.home:is(.slg-main-site,.slg-live-site) .slg-pack-ctaband {text-align:center;}
body.home:is(.slg-main-site,.slg-live-site) .slg-pack-content .slg-pack-ctaband > .slg-pack-grid {gap:46px;max-width:64em;margin:34px auto 0;}
body.home:is(.slg-main-site,.slg-live-site) .slg-media-text__copy .slg-pack-content .slg-pack-ctaband h3 {font-size:23px;margin:0 0 12px;}
body.home:is(.slg-main-site,.slg-live-site) .slg-pack-content .slg-pack-ctaband p {margin-left:auto;margin-right:auto;color:#555;}
body.home:is(.slg-main-site,.slg-live-site) .slg-pack-content .slg-pack-ctaband p:has(> .slg-pack-button) {display:flex;flex-wrap:wrap;gap:13px;justify-content:center;max-width:none;}
body.home:is(.slg-main-site,.slg-live-site) .slg-pack-content .slg-pack-ctaband p > .slg-pack-button + .slg-pack-button {margin-left:0;}
@media(max-width:860px) {
body.home:is(.slg-main-site,.slg-live-site) .slg-pack-content .slg-pack-statement p {column-count:1;text-align:left;}
body.home:is(.slg-main-site,.slg-live-site) .slg-pack-content .slg-pack-reasons {grid-template-columns:1fr;}
body.home:is(.slg-main-site,.slg-live-site) .slg-pack-content .slg-pack-reasons .slg-pack-card {border-right:0;border-bottom:1px solid #e1e1e1;}
body.home:is(.slg-main-site,.slg-live-site) .slg-pack-content .slg-pack-reasons .slg-pack-card:last-child {border-bottom:0;}
body.home:is(.slg-main-site,.slg-live-site) .slg-media-text__copy .slg-pack-content .slg-pack-cols h3 {font-size:23px;}
}
@media(max-width:767px) {
body.home:is(.slg-main-site,.slg-live-site) .slg-media-text__copy a.slg-pack-button,body.home:is(.slg-main-site,.slg-live-site) .slg-pack-content a.slg-pack-button {width:100%;}
body.home:is(.slg-main-site,.slg-live-site) .slg-pack-content .slg-pack-ctaband p:has(> .slg-pack-button) {flex-direction:column;}
body.home:is(.slg-main-site,.slg-live-site) .slg-pack-content :not(.slg-pack-actions) > .slg-pack-button + .slg-pack-button,body.home:is(.slg-main-site,.slg-live-site) .slg-pack-content :not(.slg-pack-actions) > .slg-pack-button + br + .slg-pack-button {margin-left:0;margin-top:12px;}
}
/* M14 blog grid: the prototype's sec-head (24px light heading, letterspaced link) and card type on the legacy block */
body.home:is(.slg-main-site,.slg-live-site) .feauredblogposts-block .heading {display:flex;align-items:flex-end;justify-content:space-between;gap:22px;margin:0 -15px 26px;}
body.home:is(.slg-main-site,.slg-live-site) .feauredblogposts-block .heading > .col-sm-6 {width:auto;flex:0 1 auto;min-width:0;margin:0;}
body.home:is(.slg-main-site,.slg-live-site) .feauredblogposts-block .heading > .col-sm-6:first-child {font-size:24px;font-weight:400;letter-spacing:normal;line-height:1.25;color:#333;}
body.home:is(.slg-main-site,.slg-live-site) .feauredblogposts-block .heading .seeall {display:inline-block;font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;line-height:1.65;color:#7c7c7c;border-bottom:1px solid #e1e1e1;padding-bottom:3px;text-decoration:none;}
body.home:is(.slg-main-site,.slg-live-site) .feauredblogposts-block .heading .seeall:hover,body.home:is(.slg-main-site,.slg-live-site) .feauredblogposts-block .heading .seeall:focus {color:var(--slg-primary,#1aafc1);border-color:var(--slg-primary,#1aafc1);}
body.home:is(.slg-main-site,.slg-live-site) .feauredblogposts-block .single-blog .date {font-size:12px;font-weight:400;letter-spacing:.06em;color:#7c7c7c;margin:13px 0 5px;}
body.home:is(.slg-main-site,.slg-live-site) .feauredblogposts-block .single-blog .content {font-size:15px;font-weight:400;letter-spacing:normal;line-height:1.4;margin-bottom:0;min-height:0;}
/* the blog grid is two-up on tablets, as the prototype's .bgrid is below 860px */
@media(min-width:768px) and (max-width:991px) { body.home:is(.slg-main-site,.slg-live-site) .feauredblogposts-block .single-blog {width:50%;} }
/* flat corners everywhere the prototype is square */
body.home:is(.slg-main-site,.slg-live-site) .slg-pack-content .slg-pack-split > .slg-pack-card {border-radius:0;}
body.home:is(.slg-main-site,.slg-live-site) .slg-group-rail-heading,body.home:is(.slg-main-site,.slg-live-site) .slg-property-grid-heading,body.home:is(.slg-main-site,.slg-live-site) .slg-area-tiles-heading {letter-spacing:normal;}
/* ---- 8 Oct 2026, Main homepage follow-up (Charles, 21:12): air above the heading groups; the lower page balanced ----
Same scope as the block above. (1) A white row that follows the hero or a shaded band takes the band's top padding,
so an eyebrow never sits on a section edge; white after white still flows. (2) The lower rows were composed on the
left half of the measure: long copy rows take the statement grammar (centred head, two balanced columns, action
beneath), a heading-and-action row is a centred call to action, actions under a full-width grid sit on the centre
line, and the blog head's clearfix pseudo-elements no longer take flex slots. Paragraph text is not centred. */
body.home:is(.slg-main-site,.slg-live-site) .slg-section--hero + .slg-section--space-tight,body.home:is(.slg-main-site,.slg-live-site) .slg-section--hero + .slg-section--space-prototype-tight,body.home:is(.slg-main-site,.slg-live-site) .slg-section--shade-light + .slg-section--space-tight,body.home:is(.slg-main-site,.slg-live-site) .slg-section--shade-light + .slg-section--space-prototype-tight {padding-top:clamp(44px,5.5vw,68px);}
body.home:is(.slg-main-site,.slg-live-site) .slg-pack-content > div:has(> .slg-pack-split) > div:first-child {margin-bottom:40px;}
body.home:is(.slg-main-site,.slg-live-site) .slg-media-text__copy .slg-pack-content .slg-pack-statement h2 {margin-bottom:40px;}
/* long-copy rows (Why book with us, About LSA): the statement grammar */
body.home:is(.slg-main-site,.slg-live-site) .slg-pack-content .slg-pack-grid:has(> :only-child) {margin:0;}
body.home:is(.slg-main-site,.slg-live-site) .slg-pack-content .slg-pack-grid:has(> :only-child) > div {column-count:2;column-gap:46px;}
body.home:is(.slg-main-site,.slg-live-site) .slg-pack-content .slg-pack-grid:has(> :only-child) > div > .slg-pack-eyebrow,body.home:is(.slg-main-site,.slg-live-site) .slg-pack-content .slg-pack-grid:has(> :only-child) > div > h2,body.home:is(.slg-main-site,.slg-live-site) .slg-pack-content .slg-pack-grid:has(> :only-child) > div > p:has(> .slg-pack-button) {column-span:all;text-align:center;}
body.home:is(.slg-main-site,.slg-live-site) .slg-media-text__copy .slg-pack-content .slg-pack-grid:has(> :only-child) > div > h2 {max-width:20em;margin:0 auto 36px;}
body.home:is(.slg-main-site,.slg-live-site) .slg-pack-content .slg-pack-grid:has(> :only-child) > div > p {max-width:none;color:#555;text-align:justify;break-inside:avoid;}
body.home:is(.slg-main-site,.slg-live-site) .slg-pack-content .slg-pack-grid:has(> :only-child) > div > p:has(> .slg-pack-button) {margin:16px 0 0;text-align:center;color:inherit;}
/* a row that is only a heading and an action (Independent feedback) is a centred call to action */
body.home:is(.slg-main-site,.slg-live-site) .slg-pack-content > div:has(> h2 + .slg-pack-callout:last-child) {text-align:center;}
body.home:is(.slg-main-site,.slg-live-site) .slg-media-text__copy .slg-pack-content > div:has(> h2 + .slg-pack-callout:last-child) > h2 {margin-bottom:0;}
body.home:is(.slg-main-site,.slg-live-site) .slg-pack-content > div:has(> h2 + .slg-pack-callout:last-child) > h2::after {content:"";display:block;width:44px;height:2px;background:var(--slg-primary,#1aafc1);margin:16px auto;}
body.home:is(.slg-main-site,.slg-live-site) .slg-pack-content > div:has(> h2 + .slg-pack-callout:last-child) > .slg-pack-callout {margin-top:6px;}
/* the action (and note) under a full-width grid sits on the row's centre line */
body.home:is(.slg-main-site,.slg-live-site) .slg-pack-content .slg-pack-cells ~ p,body.home:is(.slg-main-site,.slg-live-site) .slg-pack-content .slg-pack-cols ~ p {max-width:none;text-align:center;}
body.home:is(.slg-main-site,.slg-live-site) .slg-pack-content .slg-pack-cols ~ p:not(:has(> .slg-pack-button)) {color:#555;font-size:13.5px;}
/* blog head: Bootstrap's .row clearfix pseudo-elements were flex items, pushing the title inboard and the link off the edge */
body.home:is(.slg-main-site,.slg-live-site) .feauredblogposts-block .heading {margin:0 0 26px;}
body.home:is(.slg-main-site,.slg-live-site) .feauredblogposts-block .heading::before,body.home:is(.slg-main-site,.slg-live-site) .feauredblogposts-block .heading::after {content:none;display:none;}
body.home:is(.slg-main-site,.slg-live-site) .feauredblogposts-block .heading > .col-sm-6 {float:none;}
/* the footer shares the homepage measure */
body.home:is(.slg-main-site,.slg-live-site) footer#footer > .container {width:100%;max-width:1200px;}
@media(max-width:860px) {
body.home:is(.slg-main-site,.slg-live-site) .slg-pack-content .slg-pack-grid:has(> :only-child) > div {column-count:1;}
body.home:is(.slg-main-site,.slg-live-site) .slg-pack-content .slg-pack-grid:has(> :only-child) > div > p {text-align:left;}
}
/* ---- 8 Oct 2026, Live homepage (prototype 4 Live mode, reference PDF 1f9d9635-…): the ported module headings take the
prototype's light scale, and M08 is the image beside a dark panel (.mt .txt) rather than text on white. The hero's
booking-first chrome, the trust marks, featured live stays and the footer attribution are capability-gated by
lib/ratehawk-chrome.php and appear only with the RateHawk integration enabled — the preview shows the honest
non-connected state. ---- */
body.home:is(.slg-main-site,.slg-live-site) .slg-benefit-strip-heading,body.home:is(.slg-main-site,.slg-live-site) .slg-booking-choice-heading,body.home:is(.slg-main-site,.slg-live-site) .slg-how-it-works-heading,body.home:is(.slg-main-site,.slg-live-site) .slg-section--faq .slg-faq-heading,body.home:is(.slg-main-site,.slg-live-site) .slg-section--cta-banner h2,body.home:is(.slg-main-site,.slg-live-site) .slg-media-text .slg-media-text__heading {font-size:clamp(23px,2.9vw,32px);font-weight:400;letter-spacing:normal;line-height:1.25;}
body.home.slg-live-site .slg-media-text .row {display:grid;grid-template-columns:1fr 1fr;margin:0;}
body.home.slg-live-site .slg-media-text .row > .col-sm-6 {float:none;width:auto;min-width:0;padding:0;align-self:stretch;height:auto;}
body.home.slg-live-site .slg-media-text--media-left .row > .slg-media-text__media,body.home.slg-live-site .slg-media-text--media-right .row > .slg-media-text__body {grid-column:1;grid-row:1;}
body.home.slg-live-site .slg-media-text--media-left .row > .slg-media-text__body,body.home.slg-live-site .slg-media-text--media-right .row > .slg-media-text__media {grid-column:2;grid-row:1;}
body.home.slg-live-site .slg-media-text__media {min-height:340px;}
body.home.slg-live-site .slg-media-text__media img {display:block;width:100%;height:100%;object-fit:cover;}
body.home.slg-live-site .slg-media-text .row > .col-sm-6.slg-media-text__body {display:flex;flex-direction:column;justify-content:center;padding:48px;background:#333;color:#fff;}
body.home.slg-live-site .slg-media-text .slg-media-text__heading {color:#fff;margin:0;}
body.home.slg-live-site .slg-media-text .slg-media-text__heading::after {content:"";display:block;width:44px;height:2px;background:var(--slg-primary,#1aafc1);margin:16px 0;}
body.home.slg-live-site .slg-media-text__copy,body.home.slg-live-site .slg-media-text__copy p {color:rgba(255,255,255,.82);font-size:15px;line-height:1.65;}
body.home.slg-live-site .slg-media-text__cta {align-self:flex-start;display:inline-flex;align-items:center;margin-top:8px;padding:13px 26px;border:1px solid #fff;border-radius:0;background:none;color:#fff;font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;transition:.18s;}
body.home.slg-live-site .slg-media-text__cta:hover,body.home.slg-live-site .slg-media-text__cta:focus {background:#fff;color:#333;}
@media(max-width:860px) {
body.home.slg-live-site .slg-media-text .row {grid-template-columns:1fr;}
body.home.slg-live-site .slg-media-text--media-left .row > .slg-media-text__media,body.home.slg-live-site .slg-media-text--media-right .row > .slg-media-text__media {grid-column:1;grid-row:1;}
body.home.slg-live-site .slg-media-text--media-left .row > .slg-media-text__body,body.home.slg-live-site .slg-media-text--media-right .row > .slg-media-text__body {grid-column:1;grid-row:2;}
body.home.slg-live-site .slg-media-text .row > .col-sm-6.slg-media-text__body {padding:34px 24px;}
}
/* ---- 8 Oct 2026, contact-form section (Live Enquire, Partners): Bootstrap's .container clearfix pseudo-elements were
grid items and took the first two rows beside the contact aside, pushing the heading and intro 270px down. ---- */
.slg-contact-section:has(.slg-contact-aside)::before,.slg-contact-section:has(.slg-contact-aside)::after {content:none;display:none;}
/* ---- 8 Oct 2026, closing call-to-action band (M12), both sites wherever the section is placed: the prototype's
.ctaband — heading, 44px rule, muted line, then the two actions as the same .btn (13px 26px, 12.5px/600/.12em,
square, 49px) side by side on the centre line; stacked and full width on a phone. The Bootstrap columns and the
legacy .btn.fill / .btn.outline sizes gave two different heights (reference 23.22.10). ---- */
.slg-cta-banner__inner h2 {margin:0;}
.slg-cta-banner__rule {margin:16px auto;}
.slg-cta-banner__inner p.content {max-width:40em;margin:0 auto 15px;color:#6d6d6d;font-size:15px;line-height:1.65;}
.slg-cta-banner__actions,.slg-cta-banner__actions--3 {display:flex;flex-wrap:wrap;justify-content:center;gap:13px;max-width:none;margin:22px 0 0;}
.slg-cta-banner__actions::before,.slg-cta-banner__actions::after {content:none;display:none;}
.slg-cta-banner__action {float:none;width:auto;padding:0;margin:0;}
.slg-cta-banner__action .btn,.slg-cta-banner__action a.btn.fill,.slg-cta-banner__action a.btn.outline {display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-height:49px;height:auto;width:auto;margin:0;padding:13px 26px;border:1px solid var(--slg-primary,#1aafc1);border-radius:0;background:var(--slg-primary,#1aafc1);color:#fff;font-size:12.5px;font-weight:600;letter-spacing:.12em;line-height:1.5;text-transform:uppercase;text-decoration:none;transition:.18s;}
.slg-cta-banner__action .btn.fill:hover,.slg-cta-banner__action .btn.fill:focus {background:var(--slg-primary-hover,#158fa0);border-color:var(--slg-primary-hover,#158fa0);color:#fff;}
.slg-cta-banner__action a.btn.outline {background:none;border-color:#333;color:#333;}
.slg-cta-banner__action a.btn.outline:hover,.slg-cta-banner__action a.btn.outline:focus {background:#333;border-color:#333;color:#fff;}
.slg-cta-banner__action .btn.outline::before,.slg-cta-banner__action .btn.outline::after {content:none;display:none;}
@media(max-width:767px) {
.slg-cta-banner__actions {flex-direction:column;align-items:stretch;}
.slg-cta-banner__action .btn,.slg-cta-banner__action a.btn.fill,.slg-cta-banner__action a.btn.outline {width:100%;}
}
/* a shaded band always keeps its top inset, even as a tight row (the earlier tight rule won on order) */
body.home:is(.slg-main-site,.slg-live-site) .slg-section--shade-light.slg-section--space-tight,body.home:is(.slg-main-site,.slg-live-site) .slg-section--shade-light.slg-section--space-prototype-tight {padding-top:clamp(44px,5.5vw,68px);}
/* 8 Oct 2026 — Live featured stays without live availability: the price slot is a labelled state, not a figure. */
.slg-property-card-price--unavailable b {font-weight:400;color:#6d6d6d;font-size:13px;letter-spacing:.02em;}
.slg-property-card-price--unavailable b .numb {font-weight:400;color:inherit;font-size:inherit;}
/* Shared property forms vary by site's Gravity Forms configuration. */
.slg-enq .gfield_label {width:auto!important;float:none!important;}
.slg-enq .gfield_required {display:inline!important;float:none!important;position:static!important;}
.slg-enq .gform_fields > .gfield:has(.ginput_container_email),
.slg-enq .gform_fields > .gfield:has(textarea) {grid-column:1 / -1;}
.slg-enq textarea {box-sizing:border-box;width:100%!important;min-height:110px;margin:0;padding:10px 12px;border:1px solid #ccc;border-radius:3px;background:#fff;font-size:15px;line-height:1.5;resize:vertical;}
/* Contained property media: shared with every site profile. */
.pdp-modal.modal-window.opened {
top:50%!important;left:50%!important;transform:translate(-50%,-50%)!important;
width:calc(100% - 32px);max-width:1040px;height:auto;max-height:88vh;
max-height:88dvh;overflow:auto;border-radius:4px;background:#fff;
box-shadow:0 18px 60px rgba(0,0,0,.25);
}
.pdp-modal.modal-window .text-box {float:none;padding:24px 64px 20px 24px;border-bottom:1px solid #e5e5e5;}
.pdp-modal .text-box h5.h2 {font-size:24px;line-height:1.3;}
.pdp-modal .text-box p {margin:8px 0 0;font-size:13px;line-height:1.5;color:#777;}
.pdp-modal .close {position:absolute;right:12px;top:12px;width:40px;height:40px;padding:10px;border:0;background:#fff;color:#333;z-index:3;cursor:pointer;}
.pdp-modal .modal-content-wrapper-new {flex-direction:column;padding:0;}
.pdp-modal .tabs-container {width:100%;padding:12px 24px;background:#fff;border-bottom:1px solid #e5e5e5;border-radius:0;overflow-x:auto;}
.pdp-modal .tabs {display:flex;gap:8px;margin:0;padding:0;list-style:none;}
.pdp-modal .tabs li {margin:0;flex:0 0 auto;}
.pdp-modal .tabs li a {padding:10px 16px;border:1px solid #ddd;border-radius:3px;background:#fff;color:#333;font-size:13px;}
.pdp-modal .tabs li a.active,.pdp-modal .tabs li a:hover {border-color:var(--slg-primary,#1aafc1);background:var(--slg-primary,#1aafc1);color:#fff;}
.pdp-modal .tab-content {width:100%;padding:20px 24px;background:#fff;}
.pdp-modal .swiper-slide img {display:block;width:100%;height:auto;max-height:54vh;object-fit:contain;margin:auto;}
.pdp-modal .swiper-container {background:#f7f7f7;}
.pdp-modal .video-container,.pdp-modal .virtual-tour-container {max-height:54vh;}
#colorbox.slg-photo-modal {border-radius:4px;box-shadow:0 18px 60px rgba(0,0,0,.3);}
@media(max-width:767px) {
.pdp-modal.modal-window .text-box {padding:18px 56px 18px 16px;}
.pdp-modal .text-box h5.h2 {font-size:20px;}
.pdp-modal .tabs-container {padding:12px 16px;}
.pdp-modal .tab-content {padding:16px;}
}
.pdp-modal .close i {font-size:20px;}
.pdp-modal .swiper-button-next,.pdp-modal .swiper-button-prev {width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.94);color:var(--slg-primary,#1aafc1);}
.pdp-modal .swiper-button-next:after,.pdp-modal .swiper-button-prev:after {font-size:20px;}
/* Contact sections use content height, not the legacy 1074px contact-page minimum. */
.slg-contact-section::before,.slg-contact-section::after{display:none}
body .slg-contact-section__form{min-height:0;padding:28px;border:1px solid #e5e5e5;border-radius:4px}
body .slg-contact-section .gform_wrapper .gform_fields{row-gap:24px}
body .slg-contact-section .gform_wrapper .gfield{margin-bottom:0}
body .slg-contact-section .gform_wrapper .gfield .gfield_label{padding-bottom:0;font-size:12px;line-height:1.5;letter-spacing:.8px}
body .slg-contact-section .gfield_required{color:#b42318}
body .slg-contact-section .gform_wrapper textarea{height:140px;min-height:140px}
body .slg-contact-section .gform_wrapper .gform_footer{margin:24px 0 0;padding:0;justify-content:flex-start}
body .slg-contact-section .gform_wrapper .gform_footer .gform_button{width:auto;min-width:220px;min-height:48px;height:auto;margin:0;padding:14px 28px;line-height:1.4;background:var(--slg-primary,#1aafc1);color:#fff;border:0;border-radius:3px;font-size:13px;font-weight:600;letter-spacing:1px}
.slg-contact-section__privacy{margin:16px 0 0;font-size:13px;letter-spacing:normal}
@media(max-width:767px){body .slg-contact-section__form{padding:20px 16px}body .slg-contact-section .gform_wrapper .gform_footer .gform_button{width:100%;min-width:0}}
/* Orbital adds logical sizing and an older enquiry rule uses !important. */
body .slg-contact-section .gform_wrapper .enquiry-form .gform_footer .gform_button{width:auto!important;inline-size:auto!important;min-height:48px!important;min-block-size:48px!important;min-width:220px!important;margin:0!important;margin-inline:0!important;padding:14px 28px!important;padding-block:14px!important;padding-inline:28px!important;font-size:13px!important}
@media(max-width:767px){body .slg-contact-section .gform_wrapper .enquiry-form .gform_footer .gform_button{width:100%!important;inline-size:100%!important;min-width:0!important}}
/* Shared contact template: GF's fixed select line-height must leave room for theme padding. */
.slg-network-enquiry .gform_wrapper .enquiry-form select:not([multiple]){height:auto;min-height:44px;line-height:1.4}
/* Keep shared enquiry labels, required markers and rows aligned on every GF version. */
.slg-network-enquiry .gform_wrapper .gfield .gfield_label{display:flex!important;align-items:baseline;flex-wrap:wrap;gap:0 5px;width:100%!important;min-height:18px;margin:0 0 8px!important;padding:0!important;line-height:1.5!important}
.slg-network-enquiry .gform_wrapper .gfield_label .gform-field-label__text{display:inline!important;float:none!important;width:auto!important;max-width:100%}
.slg-network-enquiry .gform_wrapper .gfield_label .gfield_required{display:inline!important;float:none!important;position:static!important;width:auto!important;margin:0!important;padding:0!important;color:#b42318;line-height:inherit}
.slg-network-enquiry .gform_wrapper .gform_fields{row-gap:24px}
.slg-network-enquiry .gform_wrapper ul.gform_fields>li.gfield{margin-top:0;margin-bottom:24px;vertical-align:top}
.slg-network-enquiry .gform_wrapper .ginput_container input:not([type=checkbox]):not([type=radio]):not([type=hidden]),.slg-network-enquiry .gform_wrapper select:not([multiple]){min-height:44px;box-sizing:border-box}
/* The shared Enquire page renders .slg-network-enquiry (templates/contact.php), not .slg-contact-section, so the same
220px × 48px submit button is declared for it here: after the Orbital block above and with higher specificity, so it
wins on every Gravity Forms theme; full width below 768px. */
body .slg-network-enquiry .gform_wrapper .gform_footer{justify-content:flex-start}
body .slg-network-enquiry .gform_wrapper .gform_footer .gform_button,body .slg-network-enquiry .gform_wrapper .enquiry-form .gform_footer .gform_button{display:inline-block!important;width:auto!important;inline-size:auto!important;min-width:220px!important;min-inline-size:220px!important;min-height:48px!important;min-block-size:48px!important;height:auto!important;margin:0!important;margin-inline:0!important;padding:14px 28px!important;padding-block:14px!important;padding-inline:28px!important;line-height:1.4!important;font-size:13px!important;font-weight:600;letter-spacing:1px;text-transform:uppercase;text-align:center;background:var(--slg-primary,#1aafc1);color:#fff;border:0;border-radius:3px;box-sizing:border-box}
@media(max-width:767px){body .slg-network-enquiry .gform_wrapper .gform_footer .gform_button,body .slg-network-enquiry .gform_wrapper .enquiry-form .gform_footer .gform_button{display:block!important;width:100%!important;inline-size:100%!important;min-width:0!important;min-inline-size:0!important}}
/* Roy feedback, 14 October: visible direct property search and stronger content cards. */
:is(.slg-main-site,.slg-live-site).home .slg-section--hero .homeform .input:has([name=property_name]) {display:block;}
@media(min-width:992px) {
:is(.slg-main-site,.slg-live-site).home .slg-section--hero .homeform {grid-template-columns:1fr 1fr 1.1fr .7fr 1.25fr auto;}
}
:is(.slg-main-site,.slg-live-site) .slg-pack-content .slg-pack-card:not(.slg-pack-card--dark) {background:#f2f6f7;border-color:#cad9dc;border-top:4px solid var(--slg-accent,#18acbc);}
:is(.slg-main-site,.slg-live-site) .slg-pack-card > strong {font-size:24px;font-weight:700;color:#26383e;}
.slg-pack-tag {display:inline-block;padding:6px 12px;margin-bottom:20px;background:#e4f3f5;color:#26383e;font-weight:700;text-transform:uppercase;letter-spacing:1px;}
.slg-pack-card--dark .slg-pack-tag {background:#fff;color:#26383e;}
.slg-editor-browse a {text-decoration:underline;font-weight:600;}