/*
Theme Name: La Costa Hub
Theme URI: https://github.com/celeromarket/lacostahub
Author: CeleroMarket
Description: A modern editorial block theme for La Costa Hub real estate, lifestyle and relocation advisory.
Version: 0.5.67
Requires at least: 7.1
Tested up to: 7.1
Requires PHP: 8.3
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lacostahub
Tags: block-patterns, full-site-editing, translation-ready
*/

:root {
  --lch-header-height: 88px;
  --lch-transition: 240ms ease;
}

html {
  scroll-behavior: smooth;
  /* 3.31:1 on the page-ground track; author-styled UI needs 3:1 (WCAG 1.4.11). */
  scrollbar-color: #8c8c8c var(--wp--preset--color--cream);
  /* Reserve the scrollbar permanently so removing the splash overlay, which
     locks scrolling, does not resize the viewport and shift the layout. */
  scrollbar-gutter: stable;
  scrollbar-width: thin;
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: var(--wp--preset--color--cream);
}

::-webkit-scrollbar-thumb {
  background: #8c8c8c;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--wp--preset--color--gold);
}

body {
  overflow-x: clip;
}

body,
.wp-site-blocks {
  min-height: 100%;
}

.wp-site-blocks {
  padding-bottom: 0;
  padding-top: 0;
}

/* Lenis (assets/js/smooth-scroll.js) moves the page itself, so the browser's
   own smooth scrolling steps aside while it runs; the rest is Lenis's
   required lenis.css, 1.3.27. */
html.lenis {
  scroll-behavior: auto;
}

html.lenis,
html.lenis body {
  height: auto;
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
  overflow: clip;
}

.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch],
.lenis [data-lenis-prevent-vertical],
.lenis [data-lenis-prevent-horizontal] {
  overscroll-behavior: contain;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

.lenis.lenis-autoToggle {
  transition-property: overflow;
  transition-duration: 1ms;
  transition-behavior: allow-discrete;
}

.wp-site-blocks > * {
  margin-block-start: 0;
}

:where(section[id], div[id], details[id]) {
  scroll-margin-top: calc(var(--lch-header-height) + 1rem);
}

a,
button,
input,
select,
textarea {
  outline-offset: 2px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--wp--preset--color--black);
}

.lch-header-over-hero .lch-site-header a:focus-visible,
.lch-header-over-hero .lch-site-header button:focus-visible,
.lch-hero a:focus-visible {
  outline-color: var(--wp--preset--color--white);
}

.lch-header-over-hero .lch-site-header .is-menu-open a:focus-visible,
.lch-header-over-hero .lch-site-header .is-menu-open button:focus-visible {
  outline-color: var(--wp--preset--color--black);
}

.wp-element-button,
.wp-block-button__link {
  align-items: center;
  display: inline-flex;
  justify-content: center;
  min-height: 54px;
  text-align: center;
  transition: background-color var(--lch-transition), color var(--lch-transition);
}

/* The reference CTA component is 253px wide regardless of label length. */
.wp-block-button__link {
  min-inline-size: min(253px, 100%);
}

.lch-button-small {
  flex-shrink: 0;
}

.lch-button-small .wp-element-button {
  font-size: var(--wp--preset--font-size--small);
  min-height: 36px;
  min-inline-size: 0;
  padding: 0.4rem 0.9rem;
  position: relative;
  white-space: nowrap;
}

/* Extends the pointer target to the 44px minimum without growing the
   36px visual. */
.lch-button-small .wp-element-button::after {
  content: "";
  inset: -4px 0;
  position: absolute;
}

.lch-visually-hidden {
  block-size: 1px !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  inline-size: 1px !important;
  overflow: hidden !important;
  position: absolute !important;
  white-space: nowrap !important;
}

/* Sticky global navigation on the page ground. The reference gutter is 42px
   at 1440. */
.lch-site-header {
  background-color: var(--wp--preset--color--cream);
  box-shadow: 0 1px 0 rgba(212, 179, 122, 0.35);
  box-sizing: border-box;
  color: var(--wp--preset--color--black);
  left: 0;
  padding-left: clamp(1.25rem, 2.9vw, 3rem);
  padding-right: clamp(1.25rem, 2.9vw, 3rem);
  position: fixed;
  right: 0;
  top: 0;
  transition: background-color var(--lch-transition), box-shadow var(--lch-transition), color var(--lch-transition);
  width: 100%;
  z-index: 1000;
}

/* Over the homepage hero the bar turns transparent with white text and the
   white logo. The front-page script sets the root class only while the hero
   is behind the bar, so every other page, and a page without scripts, keeps
   the light bar. */
.lch-header-over-hero .lch-site-header {
  background-color: transparent;
  box-shadow: none;
  color: var(--wp--preset--color--white);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}

/* Scrim behind the transparent bar, kept on its own layer so it can
   cross-fade with the light bar. Animating the background shorthand would
   not transition. */
.lch-site-header::before {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.25), transparent);
  content: "";
  inset: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transition: opacity var(--lch-transition);
  z-index: -1;
}

.lch-header-over-hero .lch-site-header::before {
  opacity: 1;
}

.admin-bar .lch-site-header {
  top: var(--wp-admin--admin-bar--height, 32px);
}

.lch-header__inner {
  min-height: var(--lch-header-height);
  position: relative;
  width: 100%;
}

.lch-header__inner::after {
  background: var(--wp--preset--color--gold);
  bottom: 12px;
  content: "";
  left: 50%;
  opacity: 0.9;
  position: absolute;
  top: 12px;
  width: 1px;
}

.lch-header-over-hero .lch-header__inner::after {
  background: var(--wp--preset--color--white);
}

/* The compact header shows the gold logo on the light bar and the white
   one over the hero; the wide header shows no logo, as in the export. */
.lch-header__logo,
.lch-header__hero-logo {
  display: none;
  flex: 0 0 auto;
  margin: 0;
}

.lch-primary-nav {
  width: 100%;
}

/* Two tight groups either side of a wide centre void, per the reference:
   ~65px between items at 1440. Lifestyle, which the export lacks, makes the
   right group four items and leaves ~395px of clear space in the middle. */
.lch-primary-nav .wp-block-navigation__container {
  column-gap: clamp(1.25rem, 4.5vw, 4.5rem);
  display: grid;
  grid-template-columns: repeat(4, max-content) 1fr repeat(4, max-content);
  width: 100%;
}

.lch-primary-nav .wp-block-navigation-item:nth-child(5) {
  grid-column: 6;
}

.lch-primary-nav a {
  min-height: 44px;
  position: relative;
  text-decoration: none;
}

.lch-primary-nav a::after {
  background: var(--wp--preset--color--gold);
  bottom: 4px;
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--lch-transition);
  width: 100%;
}

.lch-primary-nav a:hover::after,
.lch-primary-nav a[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* Progressive splash: absent unless the head script opts in. */
.lch-splash {
  display: none;
}

.lch-splash-pending {
  overflow: hidden;
}

.lch-splash-pending .lch-splash {
  align-items: center;
  background: var(--wp--preset--color--cream);
  display: flex;
  inset: 0;
  justify-content: center;
  opacity: 1;
  position: fixed;
  transition: opacity 420ms ease;
  z-index: 9999;
}

.lch-splash-pending .lch-splash.is-leaving {
  opacity: 0;
  pointer-events: none;
}

/* 358px renders the wordmark itself at the reference 333px, because the
   source PNG carries 19px of transparent bleed on every side. */
.lch-splash img {
  height: auto;
  max-width: min(358px, 60vw);
}

/* Shared section language. From the tablet breakpoint up every homepage
   section after the hero is at least one screen tall with its content
   centred; taller content grows, and phones keep natural heights. */
.lch-section {
  box-sizing: border-box;
  padding-bottom: var(--wp--preset--spacing--section);
  padding-top: var(--wp--preset--spacing--section);
  position: relative;
}

@media (min-width: 768px) {
  .lch-section {
    align-content: center;
    min-height: 100svh;
  }
}

.lch-section__intro {
  margin-bottom: var(--wp--preset--spacing--x-large);
}

/* The reference listings column is ~990px, wider than the content size. */
.lch-listings .lch-section__intro {
  max-width: 1000px;
}

/* The centre hairline threads the whole page: it enters each section at the
   top and leaves at the bottom, clearing the content in between. */
.lch-brand-rule::before,
.lch-brand-rule::after {
  background: var(--wp--preset--color--gold);
  content: "";
  height: clamp(3.5rem, 12%, 8rem);
  left: 50%;
  opacity: 0.9;
  pointer-events: none;
  position: absolute;
  width: 1px;
  z-index: 0;
}

.lch-brand-rule::before {
  top: 0;
}

.lch-brand-rule::after {
  bottom: 0;
}

/* In a section the rule stops a rem short of the content: on phones, and in
   sections taller than one screen, it would otherwise reach past the section
   padding into the heading and the last block. */
.lch-section.lch-brand-rule::before,
.lch-section.lch-brand-rule::after {
  height: min(clamp(3.5rem, 12%, 8rem), calc(var(--wp--preset--spacing--section) - 1rem));
}

/* Second half of the two-tone "La Costa Hub News" heading: the same gold
   at regular weight. */
.lch-heading-plain {
  font-weight: 400;
}

.lch-instagram__glyph {
  color: var(--wp--preset--color--gold);
  display: block;
}

/* Hero. The vertical rhythm mirrors the Canva reference measured at 1440x810,
   where the wordmark centres at 28.1% of the viewport, the tagline at 54.1%
   and the button at 88.1%. The three blocks are spread across the full hero
   rather than centred as one cluster. */
.lch-hero {
  color: var(--wp--preset--color--white);
  display: grid;
  isolation: isolate;
  min-height: 100svh;
  overflow: hidden;
  padding: 0 var(--wp--preset--spacing--gutter);
  position: relative;
}

.lch-hero.lch-brand-rule::before,
.lch-hero.lch-brand-rule::after {
  background: currentColor;
}

.lch-hero__media,
.lch-hero__image {
  inset: 0;
  position: absolute;
}

.lch-hero__media {
  z-index: -2;
}

.lch-hero__image {
  height: 100%;
  object-fit: cover;
  object-position: 62% center;
  width: 100%;
}

.lch-hero__content {
  align-content: start;
  display: grid;
  padding-block: clamp(5rem, 22.8svh, 13rem) clamp(2rem, 8.2svh, 4.75rem);
  position: relative;
  width: 100%;
  z-index: 2;
}

.lch-hero > *,
.lch-hero__content > * {
  margin-block-start: 0;
}

/* 275px renders the wordmark at the reference 256px once the PNG's
   19px transparent bleed is accounted for. */
.lch-hero__logo {
  margin-bottom: clamp(2rem, 16.7svh, 9rem);
  text-align: center;
}

.lch-hero__logo img {
  filter: drop-shadow(0 1px 10px rgba(0, 0, 0, 0.3));
  margin-inline: auto;
}

/* The centre rule also threads the two gaps inside the hero, clearing
   roughly 30px above and below each block as the reference does. */
.lch-hero__logo,
.lch-hero__tagline {
  position: relative;
}

.lch-hero__logo::after,
.lch-hero__tagline::after {
  background: currentColor;
  content: "";
  left: 50%;
  opacity: 0.9;
  pointer-events: none;
  position: absolute;
  top: calc(100% + 1.875rem);
  width: 1px;
}

.lch-hero__logo::after {
  height: max(0px, calc(clamp(2rem, 16.7svh, 9rem) - 3.75rem));
}

.lch-hero__tagline::after {
  height: max(0px, calc(clamp(2.5rem, 26.9svh, 14rem) - 3.75rem));
}

/* 1.53vw lands on the reference's ~22px at 1440, which is what makes the
   tagline break into the same two lines inside a 480px column. */
.lch-hero__tagline {
  font-size: clamp(1.05rem, 1.53vw, 1.45rem) !important;
  font-weight: 700;
  line-height: 1.35;
  margin-bottom: clamp(2.5rem, 25.3svh, 13rem);
  margin-left: auto;
  margin-right: auto;
  max-width: 480px;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.4);
}

.lch-hero .wp-block-buttons {
  margin-top: 0;
}

/* Hero entrance, after the old site's: the top of the centre rule slides
   down 100px as it fades in, then the wordmark, tagline, button and the foot
   of the rule slide up, each a beat after the one above. It waits behind
   the splash, and only the start state is filled, so nothing keeps a
   transform once it has played. */
@keyframes lch-hero-down {
  from {
    opacity: 0;
    transform: translateY(-100px);
  }
}

@keyframes lch-hero-up {
  from {
    opacity: 0;
    transform: translateY(100px);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .home .lch-hero::before {
    animation: lch-hero-down 2.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) backwards;
  }

  .home .lch-hero__logo,
  .home .lch-hero__tagline,
  .home .lch-hero .wp-block-buttons,
  .home .lch-hero::after {
    animation: lch-hero-up 2.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) var(--lch-hero-delay) backwards;
  }

  .home .lch-hero__logo {
    --lch-hero-delay: 0.2s;
  }

  .home .lch-hero__tagline {
    --lch-hero-delay: 0.5s;
  }

  .home .lch-hero .wp-block-buttons {
    --lch-hero-delay: 0.8s;
  }

  .home .lch-hero::after {
    --lch-hero-delay: 1.1s;
  }

  .lch-splash-pending .lch-hero::before,
  .lch-splash-pending .lch-hero::after,
  .lch-splash-pending .lch-hero__logo,
  .lch-splash-pending .lch-hero__tagline,
  .lch-splash-pending .lch-hero .wp-block-buttons {
    animation-play-state: paused;
  }
}

/* Scroll reveal from the design prototype (variant A). The reveal script
   adds the class only when scripts run and motion is welcome, so without it
   everything simply shows. What comes into view together carries its order
   as --lch-reveal-index and follows itself 90ms apart. */
.lch-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--lch-reveal-index, 0) * 90ms);
}

.lch-reveal.is-in {
  opacity: 1;
  transform: none;
}

/* Newsletter sign-up from the lacostahub-newsletter plugin: a quiet outlined
   button in the hero's bottom-left corner, opening its form in a light panel
   in the screen's bottom-left corner, where the panel also opens by itself on
   every page. The fields reuse the footer form's styles. */
.lch-hero .lch-newsletter {
  bottom: clamp(1.5rem, 4svh, 2.5rem);
  left: var(--wp--preset--spacing--gutter);
  position: absolute;
  z-index: 3;
}

.lch-newsletter__toggle {
  background: transparent;
  border: 1px solid currentColor;
  color: var(--wp--preset--color--white);
  cursor: pointer;
  font: inherit;
  font-size: var(--wp--preset--font-size--small);
  font-weight: 700;
  min-height: 44px;
  padding: 0.6rem 1.2rem;
  transition: background-color var(--lch-transition), border-color var(--lch-transition);
}

.lch-newsletter__toggle:hover,
.lch-newsletter__toggle:focus-visible {
  background: var(--wp--preset--color--gold);
  border-color: var(--wp--preset--color--gold);
}

.lch-newsletter__panel {
  background: var(--wp--preset--color--cream);
  border: 1px solid var(--wp--preset--color--gold);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
  box-sizing: border-box;
  color: var(--wp--preset--color--black);
  inset: auto auto var(--wp--preset--spacing--gutter) var(--wp--preset--spacing--gutter);
  margin: 0;
  max-height: calc(100dvh - var(--wp--preset--spacing--gutter) - 1rem);
  max-width: calc(100vw - 2 * var(--wp--preset--spacing--gutter));
  overflow-y: auto;
  padding: 1.5rem 1.75rem 1.25rem;
  width: 440px;
}

.lch-newsletter__close {
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  font-size: 1.75rem;
  line-height: 1;
  padding: 0.25rem 0.5rem;
  position: absolute;
  right: 0.5rem;
  top: 0.5rem;
}

.lch-newsletter__title {
  color: var(--wp--preset--color--gold);
  font-size: var(--wp--preset--font-size--heading-3);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 0.6rem;
}

.lch-newsletter__intro,
.lch-newsletter__panel .lch-form__consent {
  font-size: var(--wp--preset--font-size--small);
}

.lch-newsletter__intro {
  margin: 0 0 1.1rem;
}

/* The panel stays compact enough to fit a laptop screen without scrolling:
   tighter fields, with the first and last name side by side. */
.lch-newsletter__panel .lch-newsletter__form {
  column-gap: 1.25rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.lch-newsletter__panel .lch-newsletter__form > * {
  grid-column: 1 / -1;
}

.lch-newsletter__panel .lch-newsletter__form > .lch-form__field:nth-child(-n + 2) {
  grid-column: auto;
}

.lch-newsletter__panel .lch-form__field {
  margin-bottom: 0.8rem;
}

.lch-newsletter__panel .lch-form__consent {
  margin: 1rem 0 1.1rem;
}

.lch-newsletter__panel .wp-element-button {
  width: 100%;
}

.lch-newsletter__status {
  margin: 0.9rem 0 0;
}

.lch-newsletter__status:empty {
  display: none;
}

/* Editorial statement and buyer audience. */
.lch-brand-statement > * {
  max-width: 1040px !important;
}

/* The reference sets these paragraphs justified; narrow screens read
   better ragged, so the mobile block below keeps its left alignment. */
@media (min-width: 600px) {
  .lch-brand-statement p {
    text-align: justify;
  }
}

.lch-brand-statement__closing {
  line-height: 1.35;
  margin-top: var(--wp--preset--spacing--large);
}

/* The section photos show through the cream: the Buyer's Agent photo at
   about 12 percent, the audience, process and team photos at about 15, a
   little stronger than Karoline's 5 to 10 at the owner's request of
   2026-10-05. Cover dim ratios serialize in steps of ten, so the finer
   values are set here. */
.wp-block-cover.lch-buyers-agent > .wp-block-cover__background.has-background-dim.has-background-dim-90 {
  opacity: 0.88;
}

.wp-block-cover.lch-audience > .wp-block-cover__background.has-background-dim.has-background-dim-90,
.wp-block-cover.lch-process > .wp-block-cover__background.has-background-dim.has-background-dim-90,
.wp-block-cover.lch-team > .wp-block-cover__background.has-background-dim.has-background-dim-90 {
  opacity: 0.85;
}

.lch-buyers-agent,
.lch-audience {
  padding-left: var(--wp--preset--spacing--gutter);
  padding-right: var(--wp--preset--spacing--gutter);
}

/* Buyer's Agent: the portrait takes about 30 percent of the wide column,
   as on the export's page 4, with the text beside it. */
.lch-buyers-agent__inner {
  align-items: start;
  display: grid;
  gap: clamp(1.5rem, 2.4vw, 2.5rem);
  grid-template-columns: minmax(0, 3fr) minmax(0, 7fr);
}

/* Its own stacking layer keeps the panel below under the photo but above
   the section's cream overlay. */
.lch-buyers-agent__portrait {
  isolation: isolate;
  margin: 0;
  position: relative;
}

/* A Mist panel behind the portrait, as in the design prototype (variant A):
   it runs in from the page's left edge to just past the photo and stops
   short of its top and bottom, so the photo stands out of it. */
.lch-buyers-agent__portrait::before {
  background: var(--wp--preset--color--mist);
  bottom: 9%;
  content: "";
  left: -100vw;
  position: absolute;
  right: -1.25rem;
  top: 9%;
  z-index: -1;
}

.lch-buyers-agent__portrait img {
  aspect-ratio: 2 / 3;
  display: block;
  height: auto;
  object-fit: cover;
  width: 100%;
}

.lch-buyers-agent__copy > * {
  max-width: 900px;
}

.lch-buyers-agent__title {
  font-size: clamp(1.75rem, 2.5vw, 2.5rem);
  font-weight: 400;
  line-height: 1.2;
  margin-top: 0;
}

.lch-buyers-agent__quote {
  margin: clamp(1.5rem, 3.5vh, 2.5rem) 0 0;
  padding: 0;
}

.lch-buyers-agent__quote p {
  line-height: 1.5;
}

.lch-buyers-agent__quote .lch-buyers-agent__closing {
  line-height: 1.3;
  margin-top: clamp(1.5rem, 4.5vh, 3rem);
}

.lch-buyers-agent__quote cite {
  display: block;
  font-size: var(--wp--preset--font-size--lead);
  font-style: normal;
  line-height: 1.5;
  margin-top: clamp(2rem, 7vh, 4.5rem);
}

@media (min-width: 600px) {
  .lch-buyers-agent__quote p:not(.lch-buyers-agent__closing) {
    text-align: justify;
  }
}

/* Who's representing you: the text column on the left and the photo on
   the right, as on the export's page 5. */
.lch-audience__inner {
  align-items: center;
  display: grid;
  gap: clamp(2rem, 3.7vw, 3.5rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.lch-audience__copy {
  padding-inline: clamp(0rem, 2vw, 2.5rem) 0;
}

.lch-audience__question {
  margin-bottom: clamp(2rem, 8vh, 4.5rem);
}

.lch-audience__question p,
.lch-audience__question h2 {
  margin-bottom: 0;
  margin-top: 0;
}

.lch-audience__question p {
  font-size: clamp(1.4rem, 2.4vw, 2.25rem);
  line-height: 1.3;
}

.lch-audience__question h2 {
  font-size: clamp(1.6rem, 2.5vw, 2.4rem);
}

.lch-audience__lead {
  font-size: var(--wp--preset--font-size--heading-3);
  line-height: 1.2;
  margin-bottom: 0;
}

.lch-audience__copy h3 {
  margin-bottom: 0.5rem;
}

.lch-audience__copy p + h3 {
  margin-top: clamp(1.5rem, 4.5vh, 2.5rem);
}

.lch-audience__copy .lch-audience__lead + h3 {
  margin-top: 0.25rem;
}

.lch-audience__copy p {
  margin-top: 0;
}

.lch-audience__copy > p:not(.lch-audience__lead) {
  font-size: clamp(1rem, 1.3vw, 1.1875rem);
}

.lch-audience__copy .wp-block-buttons {
  margin-top: clamp(2rem, 8vh, 4.5rem);
}

.lch-audience__photo {
  margin: 0;
}

.lch-audience__photo img {
  aspect-ratio: 943 / 798;
  display: block;
  height: auto;
  object-fit: cover;
  width: 100%;
}

/* These groups use the default block layout, so WordPress still emits its
   flow rule `> * + * { margin-block-start: blockGap }`. On a CSS grid that
   pushes every item except the first down by one gap. */
.lch-buyers-agent__inner > *,
.lch-audience__inner > *,
.lch-area-grid > *,
.lch-listing-grid > *,
.lch-process-grid > *,
.lch-team-grid > *,
.lch-instagram-grid > *,
.lch-footer-grid > * {
  margin-block-start: 0;
}

/* Area cards. Reference cards measure 321x299, very close to square. */
.lch-area-grid {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: var(--wp--preset--spacing--x-large);
}

.lch-area-card {
  aspect-ratio: 15 / 14;
  margin: 0;
  overflow: hidden;
  position: relative;
}

.lch-area-card::after {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.55));
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.lch-area-card figure,
.lch-area-card img {
  height: 100%;
  margin: 0;
  object-fit: cover;
  transition: transform 600ms ease;
  width: 100%;
}

.lch-area-card h3 {
  font-size: clamp(1.6rem, 2.8vw, 2.5rem);
  inset: 50% 1rem auto;
  margin: 0;
  position: absolute;
  transform: translateY(-50%);
  z-index: 2;
}

.lch-area-card h3 a {
  text-decoration: none;
}

.lch-area-card h3 a::after {
  content: "";
  inset: -50vh -2rem;
  position: absolute;
}

.lch-area-card:has(a:hover) img,
.lch-area-card:has(a:focus-visible) img {
  transform: scale(1.04);
}

/* Five-step process. */
.lch-process {
  padding-left: var(--wp--preset--spacing--gutter);
  padding-right: var(--wp--preset--spacing--gutter);
}

.lch-process__inner > .has-lead-font-size {
  margin-bottom: var(--wp--preset--spacing--large);
}

/* The reference breaks these intros only at their line breaks. */
.lch-area-guides .lch-section__intro,
.lch-area-guides .lch-section__intro > .has-lead-font-size,
.lch-process__inner > .has-lead-font-size {
  max-width: 940px;
}

.lch-process-grid {
  --lch-process-step-inset: clamp(0.75rem, 1.5vw, 1.5rem);
  display: grid;
  gap: 0;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: var(--wp--preset--spacing--large);
  padding: clamp(2rem, 4vw, 3rem) calc(var(--wp--preset--spacing--gutter) - var(--lch-process-step-inset));
}

/* The band runs edge to edge across the cover, past both the cover's and the
   inner group's gutter, while the step text lines up with the page gutter as
   in the reference. The specificity outranks core's alignfull margins. */
.lch-process .lch-process__inner > .lch-process-grid {
  margin-inline: calc(var(--wp--preset--spacing--gutter) * -2);
}

.lch-process-step {
  padding: 0 var(--lch-process-step-inset);
  position: relative;
}

/* The delimiter closes its own step's column, so it sits in the open space
   after the heading rather than against the next one, as in the reference. */
.lch-process-step:not(:last-child)::after {
  background: var(--wp--preset--color--gold);
  content: "";
  height: 2px;
  position: absolute;
  right: var(--lch-process-step-inset);
  top: 1rem;
  width: 2.5rem;
}

/* As a step fades in, its gold delimiter draws in from the left, as in the
   design prototype. */
.lch-process-step.lch-reveal::after {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--lch-reveal-index, 0) * 120ms + 200ms);
}

.lch-process-step.lch-reveal.is-in::after {
  transform: none;
}

/* The number and the name share one size, about 26px at 1440 as in the
   reference, so the longest name stays on one line in five columns. */
.lch-process-step h3 {
  font-size: clamp(1.25rem, 1.8vw, 1.625rem);
  white-space: nowrap;
}

.lch-process-step > p {
  margin-block: 0.45rem 0;
}

/* The reference separates the two sentence blocks of each step. */
.lch-process-step > p + p {
  margin-block-start: 0.7rem;
}

.lch-process .wp-block-buttons {
  margin-top: -1.5rem;
  position: relative;
  z-index: 2;
}

/* Listing cards. Our Selection, on the homepage and under an Archived
   Listing, and the Listings page run their cards across
   the full page width inside the site gutter, three to a row, large like the
   old site's cards; the wide size is lifted for their children only. Each
   grid is a core Query Loop over the plugin's Listings; the list markup comes
   from the post template and the card from the listing-card pattern. */
.lch-listings,
.lch-listings-page,
.lch-property__current {
  --wp--style--global--wide-size: 100%;
}

.lch-listing-query {
  margin-bottom: var(--wp--preset--spacing--x-large);
}

.lch-listing-grid {
  --lch-listing-gap: clamp(1.25rem, 2vw, 2rem);
  display: grid;
  gap: var(--lch-listing-gap);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.lch-listing-grid .wp-block-post {
  min-width: 0;
}

.lch-listing-card {
  --lch-listing-card-pad: clamp(1rem, 1.3vw, 1.5rem);
  border: 1px solid rgba(0, 0, 0, 0.12);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--lch-listing-card-pad);
  position: relative;
}

.lch-listing-card figure {
  margin: 0 0 1.1rem;
  overflow: hidden;
}

/* The badge sits over the top-left corner of the photo and disappears when
   the Listing has none (the binding leaves the paragraph empty). */
.lch-listing-card__badge {
  background: var(--wp--preset--color--gold);
  color: var(--wp--preset--color--black);
  font-size: 0.75rem;
  font-weight: 700;
  left: calc(var(--lch-listing-card-pad) + 0.75rem);
  letter-spacing: 0.08em;
  line-height: 1;
  margin: 0;
  padding: 0.5rem 0.75rem;
  position: absolute;
  text-transform: uppercase;
  top: calc(var(--lch-listing-card-pad) + 0.75rem);
  z-index: 1;
}

.lch-listing-card__badge:empty {
  display: none;
}

.lch-listing-query .wp-block-query-no-results {
  margin: 0 auto;
  max-width: 640px;
}

.lch-listing-card img {
  transition: transform 600ms ease;
}

.lch-listing-card:hover img {
  transform: scale(1.025);
}

.lch-listing-card__title {
  font-size: clamp(1.125rem, 1.35vw, 1.375rem);
  line-height: 1.3;
  margin: 0 0 0.6rem;
}

.lch-listing-card__facts {
  font-size: clamp(0.9375rem, 1vw, 1.0625rem);
  line-height: 1.55;
  margin: 0 0 1.1rem;
}

/* The price row closes every card at the same height. */
.lch-listing-card__meta {
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  gap: 0.75rem 1rem;
  margin-top: auto;
  padding-top: 1rem;
}

.lch-listing-card__price {
  font-size: clamp(0.9375rem, 1vw, 1.0625rem);
  font-weight: 700;
  margin: 0;
  white-space: nowrap;
}

/* Listings page: the Location map under the title, a square-cornered card
   of the drawing's own 1200x300 proportions as wide as the
   filters and cards. Its text is in drawing units, so it scales with it;
   names take the --lch-map-label size the block renders on the drawing.
   The Regions are a mosaic of pale facets with a cream grout between them;
   the links above them are transparent until hovered or focused.

   The map's own shades beside the palette: a Region at rest, lit and empty,
   the grey of empty names and outlines, the blue grey of the sea's label and
   north arrow, the zoom buttons' border, and a deep gold for focus outlines
   and the pinned card's second line, 3:1 against the pale Regions and 4.5:1
   on the white card. */
.lch-location-map {
  --lch-map-region: #FBF8F2;
  --lch-map-lit: #E6CF9F;
  --lch-map-empty: #F1EFEB;
  --lch-map-empty-ink: #ABA59B;
  --lch-map-sea-ink: #8DA2AF;
  --lch-map-edge: #D6CFC3;
  --lch-map-gold-deep: color-mix(in srgb, var(--wp--preset--color--gold), var(--wp--preset--color--black) 40%);
  margin-bottom: var(--wp--preset--spacing--large);
}

.lch-location-map__drawing {
  display: block;
  font-size: var(--lch-map-label);
  font-weight: 600;
  height: auto;
  width: 100%;
}

.lch-location-map__land {
  fill: var(--wp--preset--color--mist);
}

.lch-location-map__sea {
  fill: var(--wp--preset--color--sea);
}

.lch-location-map__sea,
.lch-location-map__shape {
  stroke: var(--wp--preset--color--cream);
  stroke-linejoin: miter;
  stroke-width: 4;
}

.lch-location-map__shape {
  fill: var(--lch-map-region);
}

.lch-location-map__shape.is-lit {
  fill: var(--lch-map-lit);
}

.lch-location-map__shape.is-chosen {
  fill: var(--wp--preset--color--gold);
}

.lch-location-map__shape.is-empty {
  fill: var(--lch-map-empty);
}

.lch-location-map__label,
.lch-location-map__card text {
  dominant-baseline: central;
  fill: var(--wp--preset--color--black);
  text-anchor: middle;
}

.lch-location-map__label.is-empty {
  fill: var(--lch-map-empty-ink);
  font-weight: 500;
}

.lch-location-map__sea-label,
.lch-location-map__north {
  fill: var(--lch-map-sea-ink);
  font-size: 0.82em;
  text-anchor: middle;
}

.lch-location-map__sea-label {
  font-weight: 500;
  letter-spacing: 0.4em;
  text-transform: uppercase;
}

.lch-location-map__region polygon {
  fill: var(--wp--preset--color--gold);
  fill-opacity: 0;
  pointer-events: none;
  stroke: var(--wp--preset--color--gold);
  stroke-opacity: 0;
  stroke-width: 2;
  transition: fill-opacity var(--lch-transition), stroke-opacity var(--lch-transition);
}

a.lch-location-map__region,
a.lch-location-map__dot,
a.lch-location-map__beyond {
  outline: none;
  text-decoration: none;
}

a.lch-location-map__region {
  transition: transform var(--lch-transition);
}

a.lch-location-map__region polygon {
  pointer-events: all;
}

/* Hover and focus wash a Region in light gold with a gold outline and show
   its card; the chosen Region's card stays. */
a.lch-location-map__region:is(:hover, :focus-visible) polygon {
  fill-opacity: 0.35;
  stroke-opacity: 1;
}

/* An empty Region, which asks about its place, gets a light grey outline
   on hover instead, without the wash: gold is for places with properties. */
.lch-location-map__region.is-empty polygon {
  stroke: var(--lch-map-empty-ink);
}

a.lch-location-map__region.is-empty:is(:hover, :focus-visible) polygon {
  fill-opacity: 0;
}

/* Keyboard focus outlines every Region, empty ones too, in the deep gold. */
a.lch-location-map__region:focus-visible polygon {
  stroke: var(--lch-map-gold-deep);
  stroke-width: 3;
}

/* Cards keep the names' size: on phones the view script scales them. */
.lch-location-map__card {
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.14));
  font-size: var(--lch-map-label);
  pointer-events: none;
  visibility: hidden;
}

.lch-location-map__card.is-pinned,
a:is(.lch-location-map__region, .lch-location-map__dot):is(:hover, :focus-visible) .lch-location-map__card {
  visibility: visible;
}

.lch-location-map__card path,
.lch-location-map__card rect {
  fill: var(--wp--preset--color--white);
}

.lch-location-map__card .lch-location-map__card-sub {
  fill: var(--lch-map-gold-deep);
  font-size: 0.91em;
  font-weight: 500;
}

.lch-location-map__card circle {
  fill: var(--wp--preset--color--white);
  stroke: var(--wp--preset--color--gold);
  stroke-width: 2.5;
}

/* The Areas page map's neighbourhood dots: a small gold mark in a wider
   transparent target, its name on the card on hover and focus. The link
   beyond the west border is a small name with an arrow, underlined on hover
   and focus. */
.lch-location-map__dot-mark {
  fill: var(--wp--preset--color--gold);
  stroke: var(--wp--preset--color--white);
  stroke-width: 1.5;
}

.lch-location-map__dot-target,
.lch-location-map__dot-ring {
  fill: transparent;
}

.lch-location-map__dot-ring {
  stroke: var(--lch-map-gold-deep);
  stroke-opacity: 0;
  stroke-width: 2.5;
  transition: stroke-opacity var(--lch-transition);
}

a.lch-location-map__dot:is(:hover, :focus-visible) .lch-location-map__dot-ring {
  stroke-opacity: 1;
}

.lch-location-map__beyond text {
  fill: var(--lch-map-gold-deep);
  font-size: 0.82em;
  font-weight: 500;
}

a.lch-location-map__beyond:is(:hover, :focus-visible) text {
  text-decoration: underline;
}

@media (prefers-reduced-motion: no-preference) {
  a.lch-location-map__region:is(:hover, :focus-visible) {
    transform: translateY(-3px);
  }
}

/* Phones: without the view script the drawing keeps a readable width and
   the card scrolls sideways inside itself. The script makes it a 4:3 card to
   pinch, drag and zoom, scales names through --lch-map-scale and leaves
   vertical swipes to the page. Its north arrow moves above the buttons. */
.lch-location-map__zoom {
  align-items: center;
  bottom: 8px;
  display: grid;
  gap: 2px 4px;
  grid-template-columns: 44px 44px;
  position: absolute;
  right: 8px;
}

.lch-location-map__zoom[hidden],
.lch-location-map__hint[hidden] {
  display: none;
}

.lch-location-map__zoom-north {
  align-items: center;
  color: var(--lch-map-sea-ink);
  display: flex;
  flex-direction: column;
  font-size: 9px;
  font-weight: 600;
  gap: 2px;
  grid-column: 1 / -1;
  justify-self: center;
  line-height: 1;
}

.lch-location-map__zoom-north::after {
  background: currentColor;
  clip-path: polygon(50% 0, 100% 100%, 50% 75%, 0 100%);
  content: "";
  height: 16px;
  width: 12px;
}

.lch-location-map__zoom button {
  appearance: none;
  background: var(--wp--preset--color--white);
  border: 1px solid var(--lch-map-edge);
  border-radius: 0;
  color: var(--wp--preset--color--black);
  cursor: pointer;
  display: grid;
  font: 500 22px/1 inherit;
  height: 44px;
  padding: 0;
  place-items: center;
  width: 44px;
}

.lch-location-map__zoom button:focus-visible {
  outline: 2px solid var(--wp--preset--color--gold);
  outline-offset: 2px;
}

.lch-location-map__hint {
  background: rgba(17, 17, 17, 0.78);
  bottom: 8px;
  color: var(--wp--preset--color--white);
  font-size: 0.8rem;
  font-weight: 500;
  left: 8px;
  margin: 0;
  padding: 0.45rem 0.8rem;
  pointer-events: none;
  position: absolute;
  white-space: nowrap;
}

.lch-location-map__hint.is-gone {
  opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .lch-location-map__hint {
    transition: opacity 0.6s;
  }
}

@media (max-width: 959px) {
  .lch-location-map {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    position: relative;
  }

  .lch-location-map__drawing {
    max-width: none;
    width: 1000px;
  }

  .lch-location-map.is-zoomable {
    aspect-ratio: 4 / 3;
    overflow: clip;
  }

  .lch-location-map.is-zoomable,
  .lch-location-map.is-zoomable .lch-location-map__drawing {
    touch-action: pan-y;
  }

  .lch-location-map.is-zoomable .lch-location-map__drawing {
    font-size: calc(var(--lch-map-label) * var(--lch-map-scale, 1));
    height: 100%;
    width: 100%;
  }

  .is-zoomable .lch-location-map__north {
    display: none;
  }
}

/* Listings page: the filter form above the cards and the page numbers
   below them. */

/* Two rows of four on wide screens, every field one line high: Offer,
   Location, Bedrooms and Property type, then Price, the sort and the
   buttons straight after it. The Property type column is never
   narrower than its toggles in one line. */
.lch-listing-filters {
  align-items: end;
  display: grid;
  gap: 1.25rem 1.5rem;
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(max-content, 1fr);
  margin-bottom: var(--wp--preset--spacing--x-large);
}

.lch-listing-filters__field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0;
  min-width: 0;
}

.lch-listing-filters label,
.lch-listing-filters legend {
  font-size: var(--wp--preset--font-size--small);
  font-weight: 700;
}

.lch-listing-filters fieldset {
  border: 0;
  padding: 0;
}

.lch-listing-filters legend {
  margin-bottom: 0.35rem;
  padding: 0;
}

/* The Property types as toggles side by side, at the height of the
   selects: a ticked one fills gold. The checkbox itself stays for the
   keyboard and screen readers, out of sight. */
.lch-listing-filters__field--type {
  align-items: center;
  flex-flow: row wrap;
  gap: 0.4rem;
}

/* The toggles, 42px with their border, sit centred in the 48px of a
   select. */
.lch-listing-filters fieldset.lch-listing-filters__field--type {
  padding-block: 3px;
}

.lch-listing-filters__field--type label {
  align-items: center;
  border: 1px solid var(--wp--preset--color--black);
  cursor: pointer;
  display: inline-flex;
  font-size: 0.875rem;
  font-weight: 400;
  min-height: 40px;
  padding: 0 0.6rem;
  position: relative;
}

.lch-listing-filters__field--type label:hover {
  border-color: var(--wp--preset--color--gold);
}

.lch-listing-filters__field--type label:has(:checked) {
  background: var(--wp--preset--color--gold);
  border-color: var(--wp--preset--color--gold);
  color: var(--wp--preset--color--white);
  font-weight: 700;
}

.lch-listing-filters__field--type label:has(:focus-visible) {
  outline: 2px solid var(--wp--preset--color--black);
  outline-offset: 2px;
}

.lch-listing-filters__field--type input {
  height: 1px;
  margin: 0;
  opacity: 0;
  position: absolute;
  width: 1px;
}

/* The chosen range sits on the legend's line, at its end: a floated
   legend joins the fieldset's own content, so the label can share its
   line. */
.lch-listing-filters__field--price {
  display: block;
}

.lch-listing-filters__field--price legend {
  float: left;
}

.lch-listing-filters__price {
  display: block;
  font-size: var(--wp--preset--font-size--small);
  margin-bottom: 0.35rem;
  text-align: right;
}

/* The chosen range in gold between the thumbs on a thin track; the thumbs'
   centres run from half a thumb in from each end, and so does the track. */
.lch-listing-filters__range {
  --lch-thumb: 24px;
  clear: both;
  display: block;
  height: 48px;
  position: relative;
}

.lch-listing-filters__range::before {
  background: linear-gradient(to right, var(--wp--preset--color--mist) var(--lch-from), var(--wp--preset--color--gold) var(--lch-from) var(--lch-to), var(--wp--preset--color--mist) var(--lch-to));
  content: "";
  height: 3px;
  inset: calc(50% - 1.5px) calc(var(--lch-thumb) / 2) auto;
  position: absolute;
}

/* Two inputs share the track: only their thumbs take the pointer. */
.lch-listing-filters__range input {
  appearance: none;
  background: none;
  height: 100%;
  inset: 0;
  margin: 0;
  pointer-events: none;
  position: absolute;
  width: 100%;
}

.lch-listing-filters__range input::-webkit-slider-thumb {
  appearance: none;
  background: var(--wp--preset--color--white);
  border: 2px solid var(--wp--preset--color--gold);
  border-radius: 50%;
  cursor: grab;
  height: var(--lch-thumb);
  pointer-events: auto;
  width: var(--lch-thumb);
}

.lch-listing-filters__range input::-moz-range-thumb {
  background: var(--wp--preset--color--white);
  border: 2px solid var(--wp--preset--color--gold);
  border-radius: 50%;
  box-sizing: border-box;
  cursor: grab;
  height: var(--lch-thumb);
  pointer-events: auto;
  width: var(--lch-thumb);
}

.lch-listing-filters__range input::-moz-range-track {
  background: none;
}

/* Focus rings the thumb rather than the whole track. */
.lch-listing-filters__range input:focus-visible {
  outline: none;
}

.lch-listing-filters__range input:focus-visible::-webkit-slider-thumb {
  outline: 2px solid var(--wp--preset--color--black);
  outline-offset: 2px;
}

.lch-listing-filters__range input:focus-visible::-moz-range-thumb {
  outline: 2px solid var(--wp--preset--color--black);
  outline-offset: 2px;
}

.lch-listing-filters select {
  appearance: none;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 0.25rem center / 14px 9px;
  border: 0;
  border-bottom: 1.5px solid currentColor;
  border-radius: 0;
  color: inherit;
  font: inherit;
  min-height: 48px;
  padding: 0.5rem 2rem 0.5rem 0;
  width: 100%;
}

/* Browsers treat a clicked select as focus-visible, so focus shows as the
   thicker gold underline of the sign-up fields rather than an outline box. */
.lch-listing-filters select:focus-visible {
  border-bottom-color: var(--wp--preset--color--gold);
  box-shadow: 0 1.5px 0 var(--wp--preset--color--gold);
  outline: none;
}

.lch-listing-filters__actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.75rem;
  grid-column: 3 / -1;
  margin: 0;
}

.lch-listing-filters button {
  border: 0;
  cursor: pointer;
}

.lch-listing-filters__reset {
  align-items: center;
  display: inline-flex;
  font-weight: 700;
  min-height: 44px;
}

.lch-listing-pagination {
  gap: 0.5rem;
  margin-top: var(--wp--preset--spacing--x-large);
}

.lch-listing-pagination a,
.lch-listing-pagination .page-numbers {
  align-items: center;
  display: inline-flex;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  text-decoration: none;
}

.lch-listing-pagination a:hover {
  text-decoration: underline;
  text-decoration-color: var(--wp--preset--color--gold);
}

.lch-listing-pagination .page-numbers.current {
  background: var(--wp--preset--color--gold);
  color: var(--wp--preset--color--white);
  font-weight: 700;
}

/* Stories of Excellence, as in the design prototype (variant A): a small
   label, then one testimonial at a time with its stars, the client's words
   large and light, and the name and country on one line, with arrows and a
   counter under it. The front-page script turns the list into the slider;
   without it the testimonials stand one under the other. */
.lch-testimonials h2 {
  font-size: var(--wp--preset--font-size--small);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.lch-testimonial-grid {
  display: grid;
  gap: var(--wp--preset--spacing--x-large);
  margin-inline: auto;
  max-width: 62rem;
}

.lch-testimonial-grid > .wp-block-post {
  margin-block-start: 0;
  min-width: 0;
}

.lch-testimonial-card {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
}

.lch-testimonial-card > * {
  margin-block: 0;
}

.lch-stars {
  color: var(--wp--preset--color--gold);
  display: inline-flex;
  gap: 0.25rem;
  vertical-align: top;
}

.lch-stars__star {
  fill: none;
  stroke: currentColor;
  stroke-linejoin: round;
  stroke-width: 1.5;
}

.lch-stars__star.is-filled {
  fill: currentColor;
}

.lch-testimonial-card__words {
  flex-basis: 100%;
  font-size: clamp(1.4rem, 1rem + 1.4vw, 2.2rem);
  font-weight: 300;
  line-height: 1.4;
  margin-top: 1.6rem;
}

.lch-testimonial-card__words > * {
  margin-block: 0;
}

.lch-testimonial-card__words > * + * {
  margin-top: 0.75rem;
}

.lch-testimonial-card .lch-testimonial-card__name,
.lch-testimonial-card .lch-testimonial-card__country {
  font-size: var(--wp--preset--font-size--body);
  font-weight: 700;
  line-height: 1.4;
  margin-top: 1.6rem;
}

.lch-testimonial-card__country::before {
  content: ",\00a0";
}

.lch-testimonial-card__country:empty {
  display: none;
}

/* The slider: the list scrolls sideways one testimonial at a time. */
.lch-testimonials.is-slider .lch-testimonial-grid {
  align-items: start;
  display: flex;
  gap: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.lch-testimonials.is-slider .lch-testimonial-grid::-webkit-scrollbar {
  display: none;
}

.lch-testimonials.is-slider .lch-testimonial-grid > .wp-block-post {
  flex: 0 0 100%;
  scroll-snap-align: center;
}

.lch-testimonial-nav {
  align-items: center;
  display: flex;
  font-variant-numeric: tabular-nums;
  gap: 1rem;
  justify-content: center;
  margin-top: 2.4rem;
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

/* The arrows wait for the testimonial to fade in. */
.lch-reveal:not(.is-in) + .lch-testimonial-nav {
  opacity: 0;
}

.lch-testimonial-nav button {
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.12);
  color: inherit;
  cursor: pointer;
  font-size: 1.1rem;
  height: 46px;
  transition: border-color var(--lch-transition);
  width: 46px;
}

.lch-testimonial-nav button:hover {
  border-color: var(--wp--preset--color--black);
}

/* Team: six people in one row on wide screens, three to a row on tablets
   and two on phones, a short last row centred. */
.lch-team-grid {
  --lch-team-columns: 6;
  --lch-team-gap: clamp(1rem, 2vw, 1.5rem);
  display: flex;
  flex-wrap: wrap;
  gap: var(--lch-team-gap);
  justify-content: center;
  margin: var(--wp--preset--spacing--x-large) auto;
}

.lch-team-grid > * {
  flex: 0 0 calc((100% - (var(--lch-team-columns) - 1) * var(--lch-team-gap)) / var(--lch-team-columns));
  min-width: 0;
}

.lch-team-card {
  text-align: center;
}

/* Reference portraits measure 272x386, so 7:10, cropped from the top so no
   head is cut off. */
.lch-team-card__portrait {
  aspect-ratio: 7 / 10;
  margin: 0;
  overflow: hidden;
}

.lch-team-card__portrait img {
  display: block;
  height: 100%;
  object-fit: cover;
  object-position: top;
  transition: transform 600ms ease;
  width: 100%;
}

/* Sized so the longest name stays on one line in six columns, and in
   three or two columns below 1200px. */
.lch-team-card h3 {
  font-size: clamp(0.875rem, 1.2vw, 1.125rem);
  margin-bottom: 0.25rem;
  margin-top: 1.25rem;
  text-wrap: balance;
}

.lch-team-card h3 a {
  color: inherit;
  text-decoration: none;
}

.lch-team-card h3 + p {
  font-size: clamp(0.875rem, 1vw, 1rem);
  margin-top: 0;
  text-wrap: balance;
}

.lch-team-card__more {
  display: inline-block;
  font-size: var(--wp--preset--font-size--small);
  margin-top: 0.5rem;
  text-decoration: none;
  text-underline-offset: 0.35em;
}

.lch-team-card__more:hover,
.lch-team-card__more:focus-visible {
  text-decoration: underline;
  text-decoration-color: var(--wp--preset--color--gold);
}

/* Where a pointer can hover, the portrait leans in and Read more fades in;
   on touch screens Read more always shows. */
@media (hover: hover) {
  .lch-team-card__more {
    opacity: 0;
    transition: opacity var(--lch-transition);
  }

  .lch-team-card:hover .lch-team-card__more,
  .lch-team-card:focus-within .lch-team-card__more {
    opacity: 1;
  }

  .lch-team-card:hover .lch-team-card__portrait img {
    transform: scale(1.04);
  }
}

/* News Query Loop. */
.lch-category-nav {
  list-style: none;
  margin: 0 auto var(--wp--preset--spacing--large);
  padding: 0;
  text-align: center;
}

.lch-category-nav .cat-item {
  display: inline-block;
  margin: 0.35rem 0.85rem;
}

.lch-category-nav a {
  text-decoration: none;
  text-underline-offset: 0.35em;
}

.lch-category-nav a:hover,
.lch-category-nav a:focus-visible,
.lch-category-nav .current-cat a {
  text-decoration: underline;
  text-decoration-color: var(--wp--preset--color--gold);
}

.lch-news-grid {
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

/* Highlights, as in the design prototype (variant A): a wide banner of
   Highlighted Articles first, then the newest, up to five, one slide on
   show, its copy over a dark fade on its side, the first slide's on the left
   and every second slide's mirrored to the right. On phones the copy sits at the bottom left over an upward fade and
   the arrows give way to swipe. The plugin's view module moves the slides;
   without it the first one shows. */
.lch-highlights {
  background: var(--wp--preset--color--graphite);
  color: var(--wp--preset--color--white);
  height: clamp(340px, 36vw, 500px);
  margin-bottom: var(--wp--preset--spacing--x-large);
  overflow: hidden;
  position: relative;
}

.lch-highlights__slides {
  height: 100%;
  position: relative;
  /* Vertical pans and pinch zoom stay the browser's; a sideways swipe moves
     the slides. */
  touch-action: pan-y pinch-zoom;
}

.lch-highlights__slide {
  inset: 0;
  opacity: 0;
  position: absolute;
  transition: opacity 0.9s ease, visibility 0.9s;
  visibility: hidden;
}

.lch-highlights__slide.is-current {
  opacity: 1;
  visibility: visible;
}

.lch-highlights__slide::after {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.55) 42%, rgba(0, 0, 0, 0) 76%);
  content: "";
  inset: 0;
  position: absolute;
}

.lch-highlights__slide:nth-child(even)::after {
  background: linear-gradient(270deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.55) 42%, rgba(0, 0, 0, 0) 76%);
}

.lch-highlights__image {
  height: 100%;
  inset: 0;
  object-fit: cover;
  position: absolute;
  width: 100%;
}

.lch-highlights__copy {
  /* Clear of the arrows. */
  left: clamp(5rem, 7vw, 6.5rem);
  max-width: min(34rem, 50%);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}

.lch-highlights__slide:nth-child(even) .lch-highlights__copy {
  left: auto;
  right: clamp(5rem, 7vw, 6.5rem);
  text-align: right;
}

.lch-highlights__copy > * {
  margin: 0;
}

.lch-highlights__label {
  color: var(--wp--preset--color--gold);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.lch-highlights .lch-highlights__title {
  color: var(--wp--preset--color--white);
  font-size: clamp(1.4rem, 1rem + 0.9vw, 2rem);
  font-weight: 700;
  line-height: 1.2;
  margin-top: 0.75rem;
}

.lch-highlights__excerpt {
  line-height: 1.55;
  margin-top: 0.75rem;
  opacity: 0.88;
}

.lch-highlights .lch-highlights__more {
  box-sizing: border-box;
  color: var(--wp--preset--color--black);
  margin-top: 1.5rem;
}

.lch-highlights__previous,
.lch-highlights__next {
  align-items: center;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 0;
  color: var(--wp--preset--color--white);
  cursor: pointer;
  display: flex;
  height: 46px;
  justify-content: center;
  padding: 0;
  position: absolute;
  top: calc(50% - 23px);
  transition: background-color var(--lch-transition), border-color var(--lch-transition), color var(--lch-transition);
  width: 46px;
  z-index: 1;
}

.lch-highlights__previous {
  left: 1rem;
}

.lch-highlights__next {
  right: 1rem;
}

.lch-highlights__previous:hover,
.lch-highlights__next:hover {
  background: var(--wp--preset--color--gold);
  border-color: var(--wp--preset--color--gold);
  color: var(--wp--preset--color--black);
}

.lch-highlights__dots {
  bottom: 1rem;
  display: flex;
  gap: 0.25rem;
  justify-content: center;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  z-index: 1;
}

/* A 24px target around a small dot. */
.lch-highlights__dot {
  background: transparent;
  border: 0;
  cursor: pointer;
  height: 24px;
  padding: 0;
  width: 24px;
}

.lch-highlights__dot::before {
  background: rgba(255, 255, 255, 0.55);
  border-radius: 50%;
  content: "";
  display: block;
  height: 8px;
  margin: auto;
  transition: background-color var(--lch-transition), transform var(--lch-transition);
  width: 8px;
}

.lch-highlights__dot:hover::before,
.lch-highlights__dot[aria-current="true"]::before {
  background: var(--wp--preset--color--gold);
}

.lch-highlights__dot[aria-current="true"]::before {
  transform: scale(1.25);
}

.lch-highlights button:focus-visible {
  outline: 2px solid var(--wp--preset--color--gold);
  outline-offset: 2px;
}

/* The image on show settles with a slow zoom out. */
@media (prefers-reduced-motion: no-preference) {
  .lch-highlights__slide.is-current .lch-highlights__image {
    animation: lch-highlights-settle 7s ease-out both;
  }
}

@keyframes lch-highlights-settle {
  from {
    transform: scale(1.06);
  }

  to {
    transform: scale(1);
  }
}

@media (max-width: 599px) {
  .lch-highlights {
    height: 30rem;
  }

  .lch-highlights__slide::after,
  .lch-highlights__slide:nth-child(even)::after {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.45) 45%, rgba(0, 0, 0, 0) 75%);
  }

  .lch-highlights__copy,
  .lch-highlights__slide:nth-child(even) .lch-highlights__copy {
    bottom: 3rem;
    left: 1.25rem;
    max-width: none;
    right: 1.25rem;
    text-align: left;
    top: auto;
    transform: none;
  }

  .lch-highlights.is-still .lch-highlights__copy {
    bottom: 1.5rem;
  }

  .lch-highlights__excerpt {
    -webkit-box-orient: vertical;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
  }

  .lch-highlights__previous,
  .lch-highlights__next {
    display: none;
  }

  .lch-highlights__dots {
    bottom: 0.5rem;
  }
}

/* The reference sets the card titles in black at about 17px, in body size,
   on the homepage and the Articles page alike. */
.lch-news-card .wp-block-post-title {
  color: var(--wp--preset--color--black);
  font-size: var(--wp--preset--font-size--body);
  font-weight: 700;
  line-height: 1.35;
}

.lch-news-card .wp-block-post-featured-image {
  margin-bottom: 1rem;
  overflow: hidden;
}

.lch-news-card .wp-block-post-featured-image img {
  transition: transform 600ms ease;
}

.lch-news-card .wp-block-post-featured-image:hover img {
  transform: scale(1.025);
}

.lch-news-card .wp-block-post-title {
  margin-bottom: 0.5rem;
  margin-top: 0;
}

.lch-news-card .wp-block-post-title a {
  text-decoration: none;
}

.lch-news .wp-block-buttons {
  margin-top: var(--wp--preset--spacing--x-large);
}

/* Curated Instagram grid. */

/* Reference grid is 4 x 2 tiles at roughly 276x250. */
.lch-instagram-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: var(--wp--preset--spacing--x-large);
}

.lch-instagram-grid figure {
  margin: 0;
  overflow: hidden;
}

.lch-instagram-grid img {
  display: block;
  transition: filter var(--lch-transition), transform 600ms ease;
}

.lch-instagram-grid a:hover img,
.lch-instagram-grid a:focus-visible img {
  filter: brightness(0.82);
  transform: scale(1.025);
}

/* Footer and secondary documents. */
/* The footer is the one dark band on the site: graphite ground, Cream text,
   gold logo, headings and "Follow Us". Controls and focus rings follow
   suit. */
.lch-footer {
  box-sizing: border-box;
  padding: var(--wp--preset--spacing--section) var(--wp--preset--spacing--gutter) var(--wp--preset--spacing--large);
}

.lch-footer :focus-visible {
  outline-color: var(--wp--preset--color--gold);
}

.lch-footer__logo {
  margin-bottom: var(--wp--preset--spacing--x-large);
}

.lch-footer-grid {
  display: grid;
  gap: clamp(2rem, 4vw, 4rem);
  grid-template-columns: minmax(300px, 2fr) repeat(3, minmax(140px, 1fr));
}

.lch-footer__signup {
  margin-left: 0;
  max-width: 520px;
}

/* The reference sets "& Stay Updated" at regular weight on a line of its
   own. */
.lch-footer__signup-tail {
  display: block;
  font-weight: 400;
}

/* The sign-up form of the lacostahub-newsletter plugin, in the footer and
   in the hero's popover: underlined fields in the text colour. */
.lch-form {
  max-width: 460px;
}

.lch-form label {
  align-items: center;
  display: flex;
  gap: 0.7rem;
}

.lch-form input[type="checkbox"] {
  appearance: none;
  background: transparent;
  border: 1.5px solid currentColor;
  border-radius: 0;
  color: inherit;
  display: grid;
  flex: 0 0 auto;
  height: 20px;
  margin: 0;
  place-content: center;
  width: 20px;
}

.lch-form input[type="checkbox"]::before {
  background: var(--wp--preset--color--gold);
  content: "";
  height: 10px;
  transform: scale(0);
  transition: transform 120ms ease;
  width: 10px;
}

.lch-form input[type="checkbox"]:checked::before {
  transform: scale(1);
}

.lch-form__field {
  margin: 0 0 1.6rem;
}

.lch-form__field > label,
.lch-form__label {
  display: block;
  margin-bottom: 0.1rem;
}

.lch-form input[type="text"],
.lch-form input[type="email"],
.lch-multiselect summary,
.lch-form textarea {
  background: transparent;
  border: 0;
  border-bottom: 1.5px solid currentColor;
  border-radius: 0;
  color: inherit;
  font: inherit;
  padding: 0.2rem 0 0.45rem;
  width: 100%;
}

.lch-form textarea {
  resize: vertical;
}

.lch-form input[type="text"]:hover,
.lch-form input[type="email"]:hover,
.lch-multiselect summary:hover,
.lch-form textarea:hover {
  border-bottom-color: var(--wp--preset--color--gold);
}

/* The underlined fields show focus as a thicker gold underline rather than
   the outline box, on the light sign-up panel and the graphite footer alike. */
.lch-form input[type="text"]:focus-visible,
.lch-form input[type="email"]:focus-visible,
.lch-multiselect summary:focus-visible,
.lch-form textarea:focus-visible {
  border-bottom-color: var(--wp--preset--color--gold);
  box-shadow: 0 1.5px 0 var(--wp--preset--color--gold);
  outline: none;
}

/* The tick-box dropdown: an underlined field with a slim gold chevron whose
   tick boxes drop down over the fields below it, so opening it moves nothing
   else on the page or in the popover. */
.lch-multiselect {
  position: relative;
}

/* The ticked answers stay on one line, cut short with an ellipsis. */
.lch-multiselect summary {
  box-sizing: border-box;
  cursor: pointer;
  display: block;
  list-style: none;
  overflow: hidden;
  padding-right: 1.75rem;
  position: relative;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lch-multiselect summary::-webkit-details-marker {
  display: none;
}

.lch-multiselect summary::after {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%23D4B37A' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat center / 16px 16px;
  content: "";
  height: 16px;
  position: absolute;
  right: 0.1rem;
  top: calc(50% - 8px);
  transition: transform var(--lch-transition);
  width: 16px;
}

.lch-multiselect[open] summary::after {
  transform: rotate(180deg);
}

.lch-form .lch-multiselect__options {
  background: var(--wp--preset--color--cream);
  border: 1px solid var(--wp--preset--color--gold);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
  box-sizing: border-box;
  color: var(--wp--preset--color--black);
  display: grid;
  gap: 0.75rem;
  left: 0;
  margin: 0;
  padding: 1rem;
  position: absolute;
  right: 0;
  top: calc(100% + 0.35rem);
  z-index: 2;
}

/* On the graphite footer the list takes the footer's colours. */
.lch-footer .lch-form .lch-multiselect__options {
  background: var(--wp--preset--color--graphite);
  color: var(--wp--preset--color--cream);
}

/* Constraint states after the visitor has interacted with a field. */
.lch-form input:user-valid {
  border-color: var(--wp--preset--color--gold);
}

.lch-form input:user-invalid {
  border-color: #c86a55;
}

.lch-form__consent {
  margin: 1.7rem 0 1.9rem;
}

/* The contact form's line on what its details are used for, under the button. */
.lch-form__notice {
  font-size: var(--wp--preset--font-size--small);
  margin: 0.9rem 0 0;
}

/* In the footer the form keeps clear of the heading above it. */
.lch-footer__signup .lch-form {
  margin-top: 1.6rem;
}

.lch-form .wp-element-button {
  border: 0;
  cursor: pointer;
  min-inline-size: min(253px, 100%);
}

.lch-footer__nav h3 {
  color: var(--wp--preset--color--gold);
  font-weight: 400;
  margin-bottom: 0.5rem;
}

.lch-footer__nav p {
  line-height: 1.75;
  margin-top: 0;
}

.lch-footer__nav a,
.lch-footer__meta a {
  text-decoration: none;
}

/* The reference underlines the phone number only. */
.lch-footer__meta a[href^="tel:"] {
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

.lch-footer__nav a:hover,
.lch-footer__meta a:hover {
  text-decoration: underline;
  text-decoration-color: var(--wp--preset--color--gold);
  text-underline-offset: 0.3em;
}

.lch-footer__follow {
  gap: 1rem;
  margin-top: var(--wp--preset--spacing--x-large);
}

.lch-footer__follow p {
  font-size: var(--wp--preset--font-size--lead);
  margin: 0;
}

.lch-footer__meta {
  margin-top: var(--wp--preset--spacing--2-x-large);
}

.lch-footer__meta p {
  margin: 0;
}

/* The Cookie banner (lacostahub-core): a graphite bar along the bottom that
   leaves the page usable. Without :not([hidden]) the display would override
   the hidden attribute the consent script toggles. */
.lch-cookie-banner:not([hidden]) {
  align-items: center;
  background: var(--wp--preset--color--graphite);
  bottom: 0;
  box-shadow: 0 -4px 20px rgb(0 0 0 / 0.2);
  box-sizing: border-box;
  color: var(--wp--preset--color--cream);
  display: flex;
  flex-wrap: wrap;
  font-size: var(--wp--preset--font-size--small);
  gap: 1rem 2rem;
  justify-content: space-between;
  left: 0;
  padding: 1rem var(--wp--preset--spacing--gutter);
  position: fixed;
  right: 0;
  z-index: 1001;
}

/* The script focuses the banner itself only when Cookie settings opens it. */
.lch-cookie-banner:focus {
  outline: none;
}

.lch-cookie-banner__text {
  flex: 1 1 32rem;
  margin: 0;
}

.lch-cookie-banner a {
  color: inherit;
  text-underline-offset: 0.2em;
}

.lch-cookie-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.lch-cookie-banner .wp-element-button {
  border: 0;
  cursor: pointer;
  flex: 1 0 auto;
  font-size: inherit;
  min-height: 44px;
  padding: 0.6rem 1.4rem;
}

.lch-document {
  box-sizing: border-box;
  min-height: 65svh;
  padding-bottom: var(--wp--preset--spacing--section);
  padding-top: calc(var(--lch-header-height) + var(--wp--preset--spacing--section));
}

/* Articles spell out links as addresses; on phones they break rather than
   widen the page. */
.lch-document .wp-block-post-content {
  overflow-wrap: break-word;
}

/* Every page title reads as a homepage section heading: bold gold at the
   second heading size, centred, as the Listings page sets through its block
   attributes. The article's category, date and back link centre with it.
   The Property page keeps its left-aligned head. The editor shows a page's
   or an article's title outside the template, so it is matched there too. */
.lch-document:not(.lch-property) > h1,
.lch-listings-page .wp-block-post-title,
.post-type-page .editor-post-title,
.post-type-post .editor-post-title {
  color: var(--wp--preset--color--gold);
  font-size: var(--wp--preset--font-size--heading-2);
  font-weight: 700;
  line-height: 1.08;
  text-align: center;
  text-wrap: balance;
}

.lch-document > .wp-block-post-terms,
.lch-document > .wp-block-post-date,
.lch-document:not(.lch-property, .lch-member) > .lch-back-link {
  text-align: center;
}

/* The Listings page's subtitle under Our Selection, in small, widely spaced
   capitals. */
.lch-listings-subtitle {
  font-weight: 500;
  letter-spacing: 0.3em;
  margin-top: 0.5rem;
  text-transform: uppercase;
  text-wrap: balance;
}

/* The back link, and an Areas page section's link to its properties with the
   gold arrow pointing on. */
.lch-back-link,
.lch-area-properties {
  font-size: var(--wp--preset--font-size--small);
}

.lch-back-link a,
.lch-area-properties a {
  text-decoration: none;
  text-underline-offset: 0.35em;
}

.lch-back-link a::before {
  color: var(--wp--preset--color--gold);
  content: "\2190\00a0";
}

.lch-area-properties a::after {
  color: var(--wp--preset--color--gold);
  content: "\00a0\2192";
}

.lch-back-link a:hover,
.lch-back-link a:focus-visible,
.lch-area-properties a:hover,
.lch-area-properties a:focus-visible {
  text-decoration: underline;
  text-decoration-color: var(--wp--preset--color--gold);
}

/* A page's wide sections, such as the service pages' groups, stand apart
   from each other and from the featured image above them. */
.lch-document .wp-block-post-content > .alignwide {
  margin-block-start: var(--wp--preset--spacing--x-large);
}

/* Folding sections, such as the Areas page's guides: one ruled line per
   area, its story opening below it. */
.lch-document .wp-block-details {
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  padding-block: var(--wp--preset--spacing--small);
}

.lch-document .wp-block-details + .wp-block-details {
  margin-block-start: 0;
}

.lch-document .wp-block-details summary {
  cursor: pointer;
  font-size: var(--wp--preset--font-size--lead);
  list-style: none;
  padding-right: 2rem;
  position: relative;
}

.lch-document .wp-block-details summary::-webkit-details-marker {
  display: none;
}

/* A gold chevron at the end of the line, as on the filter choices, turning
   over while the section is open. */
.lch-document .wp-block-details summary::after {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%23D4B37A' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat center / 20px 20px;
  content: "";
  height: 20px;
  position: absolute;
  right: 0.1rem;
  top: calc(50% - 10px);
  transition: transform var(--lch-transition);
  width: 20px;
}

.lch-document .wp-block-details[open] summary::after {
  transform: rotate(180deg);
}

/* Good to know: the key figures beside the FAQ, in view while it scrolls,
   and the FAQ filling its column. */
.lch-guide {
  gap: clamp(2rem, 5vw, 5rem);
  margin-block-start: var(--wp--preset--spacing--x-large);
}

.lch-guide__aside {
  align-self: flex-start;
  position: sticky;
  top: calc(var(--lch-header-height) + var(--wp--preset--spacing--medium));
}

.lch-guide__figure {
  border-top: 1px solid rgba(212, 179, 122, 0.5);
  font-size: var(--wp--preset--font-size--small);
  padding-top: var(--wp--preset--spacing--small);
}

.lch-guide__figure strong {
  color: var(--wp--preset--color--gold);
  display: block;
  font-size: var(--wp--preset--font-size--heading-3);
  line-height: 1.2;
}

.lch-guide .wp-block-post-content > .alignwide {
  margin-block-start: 0;
}

.lch-guide .wp-block-post-content .is-layout-constrained > * {
  max-width: none;
}

/* On phones the figures sit two by two above the FAQ. */
@media (max-width: 781px) {
  .lch-guide__aside {
    display: grid;
    gap: 0 var(--wp--preset--spacing--medium);
    grid-template-columns: 1fr 1fr;
    position: static;
  }

  .lch-guide__aside > * {
    margin-block-start: 0;
  }

  .lch-guide__aside .wp-block-buttons {
    grid-column: 1 / -1;
    margin-block-start: var(--wp--preset--spacing--small);
  }
}

/* Property page. The gallery and the two-column body run at the wide size;
   the reference, headline, price and facts sit in the content column. */
.lch-property > * + * {
  margin-block-start: var(--wp--preset--spacing--medium);
}

/* The gallery: the main photo fitted whole into a 3:2 frame that leaves room
   for the header and the thumbnail strip on short screens, so both show at
   once, then the strip of every photo, scrolling sideways. */
.lch-gallery {
  --lch-gallery-thumb-width: 9rem;
  margin-bottom: var(--wp--preset--spacing--large);
}

.lch-gallery__main {
  margin: 0;
}

.lch-gallery__open {
  cursor: zoom-in;
  display: block;
}

/* The frame leaves the screen room for the header, the thumbnails and 5rem
   for the strip's padding, scrollbar and margins. */
.lch-gallery__photo {
  aspect-ratio: 3 / 2;
  display: block;
  height: auto;
  max-height: max(20rem, calc(100svh - var(--lch-header-height) - var(--lch-gallery-thumb-width) * 2 / 3 - 5rem));
  object-fit: contain;
  width: 100%;
}

.lch-gallery__thumbs {
  display: flex;
  gap: var(--wp--preset--spacing--2-x-small);
  list-style: none;
  margin: var(--wp--preset--spacing--x-small) 0 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  /* Room for the rings around the current and focused thumbnail. */
  padding: 4px 4px var(--wp--preset--spacing--x-small);
  scroll-behavior: smooth;
  scroll-padding-inline: 4px;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}

.lch-gallery__thumbs > li {
  flex: none;
  scroll-snap-align: start;
}

/* A strip shorter than the frame sits centred under the photo; a longer one
   starts at the left edge. */
.lch-gallery__thumbs > li:first-child {
  margin-inline-start: auto;
}

.lch-gallery__thumbs > li:last-child {
  margin-inline-end: auto;
}

.lch-gallery__thumb {
  aspect-ratio: 3 / 2;
  display: block;
  opacity: 0.7;
  transition: opacity var(--lch-transition);
  width: var(--lch-gallery-thumb-width);
}

.lch-gallery__thumb:hover,
.lch-gallery__thumb[aria-current="true"] {
  opacity: 1;
}

.lch-gallery__thumb[aria-current="true"] {
  outline: 2px solid var(--wp--preset--color--gold);
}

.lch-gallery__thumb:focus-visible {
  opacity: 1;
  outline: 2px solid var(--wp--preset--color--black);
}

.lch-gallery__thumb img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

/* The lightbox: a native modal dialog over the whole screen, the photo
   fitted inside the controls. */
:root:has(.lch-lightbox[open]) {
  overflow: hidden;
}

.lch-lightbox {
  --lch-lightbox-control: 3rem;
  --lch-lightbox-edge: var(--wp--preset--spacing--small);
  background: var(--wp--preset--color--cream);
  border: 0;
  box-sizing: border-box;
  color: var(--wp--preset--color--black);
  height: 100%;
  margin: 0;
  max-height: none;
  max-width: none;
  overflow: hidden;
  padding: calc(var(--lch-lightbox-control) + 2 * var(--lch-lightbox-edge));
  width: 100%;
}

.lch-lightbox::backdrop {
  background: var(--wp--preset--color--cream);
}

.lch-lightbox__stage {
  height: 100%;
  margin: 0;
  /* Vertical pans and pinch zoom stay the browser's; a sideways swipe turns
     the photo. */
  touch-action: pan-y pinch-zoom;
}

.lch-lightbox__photo {
  display: block;
  height: 100%;
  object-fit: contain;
  user-select: none;
  width: 100%;
}

.lch-lightbox__counter {
  font-size: var(--wp--preset--font-size--small);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  left: var(--lch-lightbox-edge);
  letter-spacing: 0.08em;
  line-height: var(--lch-lightbox-control);
  margin: 0;
  padding-inline: 0.5rem;
  position: absolute;
  top: var(--lch-lightbox-edge);
}

.lch-lightbox button {
  align-items: center;
  background: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--gold);
  border-radius: 0;
  color: var(--wp--preset--color--black);
  cursor: pointer;
  display: flex;
  height: var(--lch-lightbox-control);
  justify-content: center;
  padding: 0;
  position: absolute;
  transition: background-color var(--lch-transition);
  width: var(--lch-lightbox-control);
}

.lch-lightbox button:hover {
  background: var(--wp--preset--color--gold);
}

.lch-lightbox__close {
  right: var(--lch-lightbox-edge);
  top: var(--lch-lightbox-edge);
}

.lch-lightbox__previous,
.lch-lightbox__next {
  top: calc(50% - var(--lch-lightbox-control) / 2);
}

.lch-lightbox__previous {
  left: var(--lch-lightbox-edge);
}

.lch-lightbox__next {
  right: var(--lch-lightbox-edge);
}

.lch-property__eyebrow {
  gap: 0.75rem 1.5rem;
}

.lch-property__eyebrow p {
  margin: 0;
}

.lch-property__reference {
  font-size: var(--wp--preset--font-size--small);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.lch-property__badges,
.lch-property__banner {
  background: var(--wp--preset--color--gold);
  color: var(--wp--preset--color--black);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  margin: 0;
  padding: 0.5rem 0.75rem;
  text-transform: uppercase;
}

.lch-property__banner {
  font-size: var(--wp--preset--font-size--small);
  padding: 0.75rem 1.25rem;
}

/* The bindings leave these paragraphs empty when the Listing has no badge
   or is current, and an empty chip must not show. */
.lch-property__badges:empty,
.lch-property__banner:empty {
  display: none;
}

.lch-property .wp-block-post-title {
  margin-bottom: 0;
}

.lch-property__meta {
  border-bottom: 1px solid rgba(212, 179, 122, 0.35);
  border-top: 1px solid rgba(212, 179, 122, 0.35);
  gap: 1rem 2rem;
  padding: var(--wp--preset--spacing--small) 0;
}

.lch-property__price {
  font-size: var(--wp--preset--font-size--lead);
  font-weight: 700;
  margin: 0;
}

.lch-property__facts {
  font-size: var(--wp--preset--font-size--small);
  letter-spacing: 0.02em;
}

.lch-property__body {
  gap: clamp(2rem, 4vw, 4rem);
}

.lch-property__body .wp-block-post-content > * {
  max-width: none;
}

.lch-property-facts {
  border-collapse: collapse;
  font-size: var(--wp--preset--font-size--small);
  margin: 0;
  width: 100%;
}

.lch-property-facts th,
.lch-property-facts td {
  border-bottom: 1px solid rgba(212, 179, 122, 0.35);
  padding: 0.7rem 0;
  text-align: left;
  vertical-align: top;
}

.lch-property-facts th {
  font-weight: 700;
  padding-right: 1rem;
  white-space: nowrap;
  width: 34%;
}

.lch-property__legal {
  font-size: var(--wp--preset--font-size--small);
}

/* The Property map: a wide frame, shorter on phones, that stays Mist until
   its script draws the map into it, with square controls like the site's
   buttons. */
.lch-property-map {
  padding-top: var(--wp--preset--spacing--large);
}

.lch-property-map__canvas {
  aspect-ratio: 16 / 7;
  background: var(--wp--preset--color--mist);
}

.lch-property-map__note {
  font-size: var(--wp--preset--font-size--small);
  margin-top: var(--wp--preset--spacing--x-small);
}

.lch-property-map .maplibregl-ctrl-group {
  border-radius: 0;
}

@media (max-width: 599px) {
  .lch-property-map__canvas {
    aspect-ratio: 4 / 3;
  }
}

.lch-property__current {
  padding-top: var(--wp--preset--spacing--x-large);
}

/* The 404 and 410 pages centre under their title. */
.lch-not-found {
  align-content: center;
  text-align: center;
}

.lch-not-found .wp-block-buttons,
.lch-not-found .lch-return-home {
  justify-content: center;
}

/* Core resets the link colour to inherit with a doubled class, so the
   white-on-gold label colour is set on the list item it inherits from. */
.lch-return-home .wp-block-home-link {
  color: var(--wp--preset--color--white);
}

.lch-return-home .wp-block-home-link:hover {
  color: var(--wp--preset--color--black);
}

.lch-return-home .wp-block-home-link__content {
  align-items: center;
  background: var(--wp--preset--color--gold);
  display: inline-flex;
  font-weight: 700;
  justify-content: center;
  min-height: 48px;
  padding: 0.9rem 2rem;
  text-decoration: none;
  transition: background-color var(--lch-transition), color var(--lch-transition);
}

.lch-return-home .wp-block-home-link__content:hover {
  background: var(--wp--preset--color--mist);
}

.wp-block-search__input {
  background: transparent;
  border: 1px solid var(--wp--preset--color--black);
  border-radius: 0;
  color: inherit;
  min-height: 48px;
}

/* A clicked text field is focus-visible too, so focus thickens the border in
   gold instead of adding the black outline box. */
.wp-block-search__input:focus-visible {
  border-color: var(--wp--preset--color--gold);
  box-shadow: inset 0 0 0 1px var(--wp--preset--color--gold);
  outline: none;
}

.wp-block-search__button {
  border: 0;
  border-radius: 0;
  font-weight: 700;
  min-height: 48px;
}

/* Keep the Site Editor usable while preserving front-end fidelity. */
.editor-styles-wrapper .lch-site-header {
  position: relative;
}

.editor-styles-wrapper .lch-splash {
  display: none !important;
}

/* The editor shows the video's poster behind the hero's white text. */
/* Team member page: the editorial split. The portrait stays in view beside
   the name, the gold Role and the story while they scroll, sized so the
   whole 7:10 portrait fits under the sticky header. */
.lch-member {
  padding-top: calc(var(--lch-header-height) + var(--wp--preset--spacing--x-large));
}

.lch-member > .lch-back-link {
  max-width: var(--wp--style--global--wide-size);
  text-align: left;
}

.lch-member__split {
  gap: clamp(2rem, 6vw, 6rem);
  margin-block-start: var(--wp--preset--spacing--large);
}

.lch-member__aside {
  align-self: flex-start;
  position: sticky;
  top: calc(var(--lch-header-height) + var(--wp--preset--spacing--medium));
}

.lch-member__portrait {
  margin: 0 0 0 auto;
  max-width: calc((100svh - var(--lch-header-height) - 2 * var(--wp--preset--spacing--medium)) * 0.7);
}

.lch-member__portrait img {
  object-position: top;
}

.lch-member__story {
  padding-block-start: clamp(0rem, 4vw, 4rem);
}

.lch-member__story > * {
  max-width: 40rem;
}

.lch-member__name {
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.02;
  margin: 0;
  text-wrap: balance;
}

/* The Role in gold capitals, closed by a short gold rule above the story. */
.lch-member__role {
  color: var(--wp--preset--color--gold);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 700;
  letter-spacing: 0.2em;
  line-height: 1.6;
  margin-block: 1.25rem 0;
  text-transform: uppercase;
}

.lch-member__role::after {
  background: var(--wp--preset--color--gold);
  content: "";
  display: block;
  height: 1px;
  margin-block-start: var(--wp--preset--spacing--large);
  width: 4rem;
}

.lch-member__story .wp-block-post-content {
  margin-block-start: var(--wp--preset--spacing--large);
}

.lch-member__story .wp-block-post-content > p:first-of-type {
  font-size: var(--wp--preset--font-size--lead);
  line-height: 1.5;
}

/* A Pullquote in the story: one line set large in gold under an opening
   quotation mark, without core's rules or centring. */
.lch-member .wp-block-pullquote {
  border: 0;
  font-size: inherit;
  margin-block: var(--wp--preset--spacing--x-large);
  padding: 0;
  text-align: left;
}

.lch-member .wp-block-pullquote:last-child {
  margin-block-end: 0;
}

.lch-member .wp-block-pullquote blockquote {
  margin: 0;
}

.lch-member .wp-block-pullquote blockquote::before {
  color: var(--wp--preset--color--gold);
  content: "\201C" / "";
  display: block;
  font-size: 5rem;
  font-weight: 700;
  height: 2.5rem;
  line-height: 1;
}

.lch-member .wp-block-pullquote p {
  color: var(--wp--preset--color--gold);
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  font-weight: 700;
  line-height: 1.25;
  text-wrap: balance;
}

/* Social Icons in the story: square, gold-ruled icon buttons like the
   site's other controls, filled gold on hover. */
.lch-member .wp-block-social-links {
  gap: 0.75rem;
  margin-block: var(--wp--preset--spacing--medium);
}

.lch-member .wp-block-social-links .wp-social-link {
  background: transparent;
  border: 1px solid var(--wp--preset--color--gold);
  border-radius: 0;
  color: var(--wp--preset--color--black);
  transition: background-color var(--lch-transition);
}

.lch-member .wp-block-social-links .wp-social-link:hover,
.lch-member .wp-block-social-links .wp-social-link:focus-within {
  background: var(--wp--preset--color--gold);
  transform: none;
}

.lch-member .wp-block-social-links .wp-block-social-link-anchor {
  align-items: center;
  color: inherit;
  display: flex;
  height: 44px;
  justify-content: center;
  padding: 0;
  width: 44px;
}

.lch-member .wp-block-social-links svg {
  height: 20px;
  width: 20px;
}

/* Meet the rest of the team: a row of small portraits under a gold rule. */
.lch-member__rest {
  border-top: 1px solid rgba(212, 179, 122, 0.5);
  margin-block-start: var(--wp--preset--spacing--section);
  padding-block-start: var(--wp--preset--spacing--x-large);
}

.lch-team-grid.lch-member__rest-grid {
  --lch-team-columns: 6;
  margin-bottom: var(--wp--preset--spacing--large);
  max-width: 64rem;
}

.lch-member__rest-grid .lch-team-card h3 {
  font-size: clamp(0.875rem, 1.1vw, 1rem);
}

.lch-member__rest-grid .lch-team-card:hover h3 a,
.lch-member__rest-grid .lch-team-card h3 a:focus-visible {
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-underline-offset: 0.35em;
}

@media (max-width: 1199px) {
  .lch-team-grid.lch-member__rest-grid {
    --lch-team-columns: 4;
  }
}

/* Phones and narrow tablets: portrait first, then the story, nothing
   sticky; three small portraits to a row. */
@media (max-width: 781px) {
  .lch-member__aside {
    position: static;
  }

  .lch-member__portrait {
    margin: 0;
    max-width: min(100%, 26rem);
  }

  .lch-member__story {
    padding-block-start: 0;
  }

  .lch-team-grid.lch-member__rest-grid {
    --lch-team-columns: 3;
  }
}

.editor-styles-wrapper .lch-hero {
  background: url("assets/images/hero.webp") 62% center / cover;
}

.editor-styles-wrapper .lch-hero__image {
  display: none;
}

@media (max-width: 1199px) {
  .lch-primary-nav {
    font-size: 0.875rem;
  }

  .lch-area-grid,
  .lch-listing-grid,
  .lch-news-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* A lone last card, as the three-card Homepage grid leaves, sits centred. */
  .lch-listing-grid > .wp-block-post:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc((100% - var(--lch-listing-gap)) / 2);
  }

  /* Two to a row: Offer beside Location, Bedrooms beside Property type,
     Price beside the sort, then the buttons. */
  .lch-listing-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lch-process-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lch-team-grid {
    --lch-team-columns: 3;
  }

  .lch-process-step:not(:last-child)::after {
    display: none;
  }

  .lch-team-card h3 {
    font-size: clamp(1rem, 2.2vw, 1.5rem);
  }

  .lch-team-card h3 + p {
    font-size: 1rem;
  }

  .lch-footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lch-listing-filters__actions {
    grid-column: 1 / -1;
  }
}

@media (max-width: 959px) {
  :root {
    --lch-header-height: 72px;
  }

  .lch-header__inner::after {
    display: none;
  }

  .lch-header__logo,
  .lch-header-over-hero .lch-header__hero-logo {
    display: block;
  }

  .lch-header-over-hero .lch-header__logo {
    display: none;
  }

  .lch-primary-nav {
    width: auto;
  }

  .lch-primary-nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: none;
  }

  .lch-primary-nav .wp-block-navigation__responsive-container-open,
  .lch-primary-nav .wp-block-navigation__responsive-container-close {
    align-items: center;
    display: flex;
    height: 44px;
    justify-content: center;
    width: 44px;
  }

  .lch-primary-nav .wp-block-navigation__responsive-container.is-menu-open {
    background: var(--wp--preset--color--cream) !important;
    color: var(--wp--preset--color--black) !important;
    padding: var(--wp--preset--spacing--gutter);
    text-shadow: none;
  }

  .lch-primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
    align-items: flex-start;
    display: flex;
    font-size: var(--wp--preset--font-size--lead);
    gap: 0.5rem;
  }

  .lch-primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(5) {
    grid-column: auto;
  }

  .lch-primary-nav .wp-block-navigation__responsive-container.is-menu-open a {
    padding: 0.5rem 0;
  }

  .lch-audience__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .lch-audience__copy {
    padding-inline: 0;
  }

  .lch-audience__photo {
    max-width: 640px;
  }
}

@media (max-width: 767px) {
  .lch-buyers-agent__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .lch-buyers-agent__portrait {
    max-width: 360px;
  }

  .lch-process-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lch-team-grid {
    --lch-team-columns: 2;
  }

  .lch-instagram-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lch-footer__meta {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 599px) {
  /* Two portraits to a row leave a narrow column for the longer Roles. */
  .lch-team-card h3 + p {
    font-size: 0.875rem;
  }

  /* On phones the gap under the tagline is shorter, so the sign-up button
     below the centred one still shows on the first screen. */
  .lch-hero__content {
    padding-top: clamp(8rem, 21svh, 11rem);
  }

  /* The centre rule keeps 1.25rem clear of the wordmark and tagline, sized
     from the phone gap rather than the wider one above. */
  .lch-hero__logo {
    margin-bottom: clamp(3rem, 11svh, 6rem);
  }

  .lch-hero__logo::after {
    height: max(0px, calc(clamp(3rem, 11svh, 6rem) - 2.5rem));
    top: calc(100% + 1.25rem);
  }

  .lch-hero__tagline {
    font-size: 1.1rem !important;
    margin-bottom: clamp(2.5rem, 16svh, 13rem);
  }

  .lch-hero__tagline::after {
    height: max(0px, calc(clamp(2.5rem, 17.6svh, 14rem) - 3.75rem));
  }

  /* The centred button fills the hero's foot on phones, so the sign-up
     button follows it in the flow instead of overlapping it. */
  .lch-hero .lch-newsletter {
    margin-bottom: 1.5rem;
    position: static;
  }

  .lch-hero__image {
    object-position: 72% center;
  }

  .lch-brand-statement {
    text-align: left;
  }

  .lch-area-grid,
  .lch-listing-grid,
  .lch-process-grid,
  .lch-news-grid,
  .lch-footer-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .lch-listing-grid > .wp-block-post:last-child:nth-child(odd) {
    justify-self: stretch;
    width: auto;
  }

  /* One to a row. */
  .lch-listing-filters {
    grid-template-columns: minmax(0, 1fr);
  }

  .lch-area-card {
    aspect-ratio: 4 / 3;
  }

  .lch-gallery {
    --lch-gallery-thumb-width: 6rem;
  }

  /* On phones the photo takes the full width, with the controls in bands
     above and below it. */
  .lch-lightbox {
    padding-inline: 0;
  }

  .lch-lightbox__previous,
  .lch-lightbox__next {
    bottom: var(--lch-lightbox-edge);
    top: auto;
  }

  .lch-process-grid {
    gap: 1.5rem;
    padding-inline: var(--wp--preset--spacing--gutter);
  }

  .lch-process-step {
    border-left: 1px solid var(--wp--preset--color--gold);
    padding-left: 1.25rem;
  }

  .lch-process-step h3 {
    white-space: normal;
  }

  .lch-instagram-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lch-footer__meta {
    gap: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}