/*
Theme Name: Lembos Advisory
Theme URI: https://capmontis.com
Author: Lembos Advisory
Author URI: https://capmontis.com
Description: A calm, premium block theme for Lembos Advisory — sustainability advisory for private markets, financial institutions and mid-market companies. Built for the WordPress Site Editor: every colour, font, image and section can be changed from the admin without touching code.
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 8.0
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: capmontis
Tags: block-theme, full-site-editing, business, portfolio, one-column, custom-colors, custom-logo, custom-menu, editor-style, block-patterns, wide-blocks, accessibility-ready
*/

/* ==========================================================================
   Lembos Advisory — supplementary styles
   Colours, fonts, spacing and type scale all live in theme.json so the client
   can change them from Appearance -> Editor -> Styles. This file only holds
   what theme.json cannot express: layout behaviour, hover states, ornaments.
   ========================================================================== */

:root {
  --cm-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --cm-header-h: 5.5rem;

  /* Small uppercase labels only.
     The brand's Muted Blue Grey #5F6F77 measures 4.44:1 on Warm Ivory, just
     under the WCAG AA minimum of 4.5:1 for text this size. This is the same
     colour darkened by three points (4.64:1) — visually identical, and it
     keeps the eight CI colours in the palette exactly as specified. */
  --cm-label: #5C6C74;

  /* Deep gold for large decorative numerals. The brand gold #B8944E only
     reaches 2.66:1 on the light grounds; this reads as the same accent but
     clears the 3:1 minimum for large text. */
  --cm-gold-deep: #9C7A3D;
}

/* --- Base ----------------------------------------------------------------- */

/* Full-width sections butt directly together. Each carries its own generous
   padding, so the root block gap only showed the page background as a strip
   between them — most visible where the hero fades out. */
.entry-content > * { margin-block-start: 0; }

/* Predictable sizing prevents padded controls and editable blocks from
   becoming wider than their columns on narrow screens. */
:where(*, *::before, *::after) { box-sizing: border-box; }

html {
  max-width: 100%;
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
}
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
body { max-width: 100%; overflow-x: clip; }
img { height: auto; }
:where(img, svg, video, canvas, iframe) { max-width: 100%; }
:where(pre, .wp-block-code) { max-width: 100%; overflow-x: auto; }

::selection { background: var(--wp--preset--color--navy); color: var(--wp--preset--color--paper); }

:where(a, button, input, select, textarea, .wp-block-button__link):focus-visible {
  outline: 2px solid var(--wp--preset--color--gold);
  outline-offset: 3px;
}

/* Skip link */
.skip-link.screen-reader-text {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--wp--preset--color--navy); color: var(--wp--preset--color--paper);
  padding: 0.85rem 1.4rem; font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase;
}
.skip-link.screen-reader-text:focus { left: 1rem; top: 1rem; }

/* --- Header --------------------------------------------------------------- */

.cm-header {
  position: sticky; top: 0; z-index: 100;
  background: transparent;
}
.cm-header > .wp-block-group { position: relative; z-index: 2; }

/* --- Progressive blur -------------------------------------------------------
   Five stacked layers, each blurring slightly more than the last and each
   masked to reach slightly less far down, so the blur ramps to nothing at the
   lower edge instead of stopping at a hard line.

   Radii top out at 10px over a 2.25rem ramp — dense enough to read clearly as
   a blur, short of the frosted-panel look of a single heavy backdrop-filter.

   Over the hero it is switched off entirely — the photograph stays untouched,
   and navy navigation already measures 7.5:1 against the sky. It fades in only
   once the page has scrolled, where it has to carry type over whatever passes
   beneath, including the deep navy section.
   ------------------------------------------------------------------------- */
.cm-header__blur {
  position: absolute;
  top: 0; left: 0; right: 0;
  bottom: -2.25rem;          /* short overshoot so the ramp can finish */
  width: 100%;
  /* The header is a constrained-layout group, which would otherwise cap this
     at the 1320px content width and centre it, leaving the bar short of both
     edges. It must run corner to corner. */
  max-width: none;
  margin: 0;
  z-index: 1;
  pointer-events: none;
  transition: bottom 0.45s var(--cm-ease);
  /* Deliberately no opacity here. An ancestor with opacity forms a compositing
     group, and Chrome then resolves backdrop-filter against that group rather
     than the page behind it — so the blur silently does nothing. Safari is
     lenient about it, which makes the bug look browser-specific. The fade is
     done by animating each layer's blur radius instead. */
}

.cm-header__blur > span {
  position: absolute; inset: 0;
  display: block;
  -webkit-backdrop-filter: blur(0px);
          backdrop-filter: blur(0px);
  transition: -webkit-backdrop-filter 0.45s var(--cm-ease),
                      backdrop-filter 0.45s var(--cm-ease);
}
.cm-header__blur > span:nth-child(1) {
  -webkit-mask-image: linear-gradient(to bottom, #fff 0%, #fff 84%, transparent 100%);
          mask-image: linear-gradient(to bottom, #fff 0%, #fff 84%, transparent 100%);
}
.cm-header.is-solid .cm-header__blur > span:nth-child(1),
.cm-header:has(.cm-nav .wp-block-navigation__responsive-container.is-menu-open) .cm-header__blur > span:nth-child(1) {
  -webkit-backdrop-filter: blur(1px);
          backdrop-filter: blur(1px);
}
.cm-header__blur > span:nth-child(2) {
  -webkit-mask-image: linear-gradient(to bottom, #fff 0%, #fff 70%, transparent 86%);
          mask-image: linear-gradient(to bottom, #fff 0%, #fff 70%, transparent 86%);
}
.cm-header.is-solid .cm-header__blur > span:nth-child(2),
.cm-header:has(.cm-nav .wp-block-navigation__responsive-container.is-menu-open) .cm-header__blur > span:nth-child(2) {
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
}
.cm-header__blur > span:nth-child(3) {
  -webkit-mask-image: linear-gradient(to bottom, #fff 0%, #fff 58%, transparent 74%);
          mask-image: linear-gradient(to bottom, #fff 0%, #fff 58%, transparent 74%);
}
.cm-header.is-solid .cm-header__blur > span:nth-child(3),
.cm-header:has(.cm-nav .wp-block-navigation__responsive-container.is-menu-open) .cm-header__blur > span:nth-child(3) {
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}
.cm-header__blur > span:nth-child(4) {
  -webkit-mask-image: linear-gradient(to bottom, #fff 0%, #fff 46%, transparent 62%);
          mask-image: linear-gradient(to bottom, #fff 0%, #fff 46%, transparent 62%);
}
.cm-header.is-solid .cm-header__blur > span:nth-child(4),
.cm-header:has(.cm-nav .wp-block-navigation__responsive-container.is-menu-open) .cm-header__blur > span:nth-child(4) {
  -webkit-backdrop-filter: blur(6.5px);
          backdrop-filter: blur(6.5px);
}
.cm-header__blur > span:nth-child(5) {
  -webkit-mask-image: linear-gradient(to bottom, #fff 0%, #fff 34%, transparent 50%);
          mask-image: linear-gradient(to bottom, #fff 0%, #fff 34%, transparent 50%);
}
.cm-header.is-solid .cm-header__blur > span:nth-child(5),
.cm-header:has(.cm-nav .wp-block-navigation__responsive-container.is-menu-open) .cm-header__blur > span:nth-child(5) {
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

/* No tint. Instead of washing a colour over whatever is behind, the type
   inverts when a dark section passes underneath (see below) — so the bar is
   nothing but a soft blur, and stays legible over both. */

/* Deep navy sections scrolling under the header: flip the type to paper.
   Navy on navy would be unreadable, and a wash heavy enough to fix it would be
   the very thing that makes the bar obtrusive. */
/* WordPress's generated navigation styles set the link colour at the same
   specificity and are printed after the theme stylesheet, so this has to be
   raised to win. */
.cm-header.cm-header--on-dark .wp-block-site-title,
.cm-header.cm-header--on-dark .wp-block-site-title a,
.cm-header.cm-header--on-dark .cm-nav a.wp-block-navigation-item__content {
  color: var(--wp--preset--color--paper) !important;
}
.cm-header--on-dark .cm-nav .current-menu-item > .wp-block-navigation-item__content,
.cm-header--on-dark .cm-nav .current_page_item > .wp-block-navigation-item__content {
  border-bottom-color: var(--wp--preset--color--paper);
}
.cm-header .wp-block-site-title,
.cm-header .wp-block-site-title a,
.cm-header .cm-nav .wp-block-navigation-item__content {
  transition: color 0.4s var(--cm-ease), border-color 0.4s var(--cm-ease);
}

/* Browsers without backdrop-filter get a plain, still-legible bar */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .cm-header.is-solid { background-color: var(--wp--preset--color--ivory); }
  .cm-header__blur > span { display: none; }
}

/* Home page: header floats over the hero, hero pulls up beneath it */
.home .cm-header { position: fixed; left: 0; right: 0; }
.home .cm-hero { margin-top: 0; }
/* The fixed header occupies no flow space, so remove the root gap above main */
.home #cm-main { margin-block-start: 0; }

/* Logo lockup. The supplied logo is a horizontal lockup that already contains
   the company name, so no text wordmark sits beside it. */
.cm-lockup { line-height: 1; }
.cm-lockup .wp-block-site-logo { margin: 0; }
.cm-lockup .wp-block-site-logo img {
  display: block;
  width: 208px;
  height: auto;
}
@media (max-width: 781px) {
  .cm-lockup .wp-block-site-logo img { width: 164px; }
}
.cm-lockup .wp-block-site-title a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

/* --- Navigation ----------------------------------------------------------- */

.cm-nav .wp-block-navigation-item__content {
  padding-block: 0.35rem;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--cm-ease), color 0.3s var(--cm-ease);
}
.cm-nav .wp-block-navigation-item__content:hover { border-bottom-color: var(--wp--preset--color--gold); }
.cm-nav .current-menu-item > .wp-block-navigation-item__content,
.cm-nav .current_page_item > .wp-block-navigation-item__content {
  border-bottom-color: var(--wp--preset--color--navy);
}

/* Mobile overlay menu */
.cm-nav .wp-block-navigation__responsive-container.is-menu-open {
  background-color: var(--wp--preset--color--ivory);
  padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30);
}
.cm-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  font-size: 1.125rem; letter-spacing: 0.06em;
}

/* --- Hero ----------------------------------------------------------------- */

.cm-hero { position: relative; isolation: isolate; }
.cm-hero .wp-block-cover__image-background {
  object-position: center 50%;
  /* A slow settle on load — cinematic without being a slideshow effect */
  animation: cm-settle 2600ms var(--cm-ease) both;
}
/* Transform only. If this animation never runs — an old browser, a blocked
   stylesheet — the photograph is still fully visible at its natural size. */
@keyframes cm-settle {
  from { transform: scale(1.055); }
  to   { transform: scale(1); }
}

/* Bottom fade: the photograph dissolves into the section beneath it.
   Done with a painted gradient rather than a mask on the image — a mask makes
   the single most important asset on the page dependent on a compositing path,
   and the failure mode there is "no photograph at all". This ends on the exact
   colour of the section that follows, so the seam is invisible. */
.cm-hero::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 22%;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(250, 247, 242, 0) 0%,
    rgba(250, 247, 242, 0.28) 34%,
    rgba(250, 247, 242, 0.62) 58%,
    rgba(250, 247, 242, 0.88) 79%,
    rgba(250, 247, 242, 1) 100%
  );
}

/* No wash over the photograph. Measured directly against the image, navy type
   sits at 7.5:1 (navigation) to 8.2:1 (headline) on the sky, well past the AA
   minimum, so the picture is left completely clean. The two elements that fall
   over darker water — the buttons and the contact card — carry their own
   backgrounds instead. */

/* Gold rule beneath the hero headline */
.cm-rule {
  border: 0; height: 1px; width: min(28rem, 100%);
  background: var(--wp--preset--color--gold);
  opacity: 0.85; margin: 0;
}
.cm-rule--short { width: 4.25rem; height: 2px; opacity: 1; }

/* Hero contact card */
.cm-contact-card {
  border: 1px solid var(--wp--preset--color--sand-line);
  background-color: color-mix(in srgb, var(--wp--preset--color--paper) 82%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}

/* --- Section furniture ---------------------------------------------------- */

.cm-eyebrow {
  font-size: var(--wp--preset--font-size--x-small);
  font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--cm-label); margin: 0;
}
/* On deep navy grounds the gold reads well (4.78:1) and carries the brand accent */
.has-navy-background-color .cm-eyebrow,
.cm-footer .cm-eyebrow { color: var(--wp--preset--color--gold); }

.cm-lead { font-size: var(--wp--preset--font-size--large); line-height: 1.65; color: var(--wp--preset--color--slate); }

/* Mountain ornament divider (matches the logo mark) */
.cm-ornament {
  display: flex; align-items: center; gap: 1.5rem;
  color: var(--wp--preset--color--gold);
}
.cm-ornament::before,
.cm-ornament::after {
  content: ""; flex: 1 1 auto; height: 1px;
  background: var(--wp--preset--color--sand-divider);
}
.cm-ornament svg { flex: 0 0 auto; display: block; }

/* --- Cards ---------------------------------------------------------------- */

.cm-card {
  border: 1px solid var(--wp--preset--color--sand-line);
  background-color: var(--wp--preset--color--paper);
  transition: transform 0.45s var(--cm-ease), box-shadow 0.45s var(--cm-ease), border-color 0.45s var(--cm-ease);
}
.cm-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--wp--preset--shadow--lift);
  border-color: var(--wp--preset--color--gold);
}
.cm-card__icon { color: var(--wp--preset--color--gold); }
.cm-card__icon svg { display: block; }

/* Numbered service cards */
.cm-card__num {
  font-family: var(--wp--preset--font-family--cormorant);
  font-size: 2rem; font-weight: 500; line-height: 1;
  color: var(--cm-gold-deep);
}

/* "Learn more" arrow links */
.cm-arrow-link a,
a.cm-arrow-link {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-size: var(--wp--preset--font-size--x-small); font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--wp--preset--color--navy);
  padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--wp--preset--color--sand-line);
  transition: border-color 0.3s var(--cm-ease), color 0.3s var(--cm-ease);
}
.cm-arrow-link a::after,
a.cm-arrow-link::after {
  content: "→"; font-size: 1rem; letter-spacing: 0;
  transition: transform 0.3s var(--cm-ease);
}
.cm-arrow-link a:hover,
a.cm-arrow-link:hover { color: var(--wp--preset--color--gold); border-bottom-color: var(--wp--preset--color--gold); }
.cm-arrow-link a:hover::after,
a.cm-arrow-link:hover::after { transform: translateX(5px); }

/* --- Buttons -------------------------------------------------------------- */

.wp-block-button__link { transition: background-color 0.3s var(--cm-ease), color 0.3s var(--cm-ease), border-color 0.3s var(--cm-ease); }

/* The services overview ends with one final card, so its CTA is deliberately
   centered beneath the full grid rather than inheriting the left grid edge. */
.cm-services__cta {
  justify-content: center;
  margin-inline: auto;
}

/* WordPress core gives the outline style its own padding (calc(.667em + 2px))
   and a 2px border, which made it a different height from the filled button
   sitting next to it. Both now take their size from the same custom properties
   in theme.json. The extra `.wp-block-buttons` and the child combinator are
   there to out-specify core's rule whichever order the stylesheets load in. */
.wp-block-buttons .wp-block-button.is-style-outline > .wp-block-button__link {
  padding: var(--wp--custom--button-padding-block) var(--wp--custom--button-padding-inline);
  border: 1px solid var(--wp--preset--color--navy);
  /* Sits over the darker part of the water, where navy on the bare photograph
     would drop below AA. A translucent chip keeps it readable without washing
     the picture. */
  background-color: rgba(250, 247, 242, 0.72);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  color: var(--wp--preset--color--navy);
}
.wp-block-buttons .wp-block-button.is-style-outline > .wp-block-button__link:hover {
  background-color: var(--wp--preset--color--navy); color: var(--wp--preset--color--paper);
}

/* --- Lists ---------------------------------------------------------------- */

.cm-ticks ul,
ul.cm-ticks { list-style: none; padding-left: 0; margin-left: 0; }
.cm-ticks li {
  position: relative; padding-left: 1.6rem; margin-bottom: 0.55rem;
  color: var(--wp--preset--color--slate);
}
.cm-ticks li::before {
  content: ""; position: absolute; left: 0; top: 0.68em;
  width: 0.5rem; height: 1px; background: var(--wp--preset--color--gold);
}

/* Two-column bullet lists on wide screens */
@media (min-width: 900px) {
  .cm-ticks--split ul { columns: 2; column-gap: 2.75rem; }
  .cm-ticks--split li { break-inside: avoid; }
}

/* --- Editorial / posts ---------------------------------------------------- */

.cm-post-card { border-bottom: 1px solid var(--wp--preset--color--sand-divider); }
.cm-post-card:last-child { border-bottom: 0; }
.cm-meta { font-size: var(--wp--preset--font-size--x-small); letter-spacing: 0.08em; text-transform: uppercase; color: var(--cm-label); }

/* Body-copy rhythm inside articles. Scoped away from full-width sections, which
   butt directly together — otherwise this leaves a strip of page background
   between them, most visibly where the hero fades out. */
.entry-content > *:not(.alignfull) + *:not(.alignfull) { margin-block-start: 1.35rem; }

/* --- Forms ---------------------------------------------------------------- */

.cm-form input[type="text"],
.cm-form input[type="email"],
.cm-form input[type="tel"],
.cm-form textarea,
.cm-form select {
  width: 100%; font-family: var(--wp--preset--font-family--inter); font-size: 1rem;
  color: var(--wp--preset--color--slate); background: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--sand-line); border-radius: 0;
  padding: 0.9rem 1rem; transition: border-color 0.3s var(--cm-ease);
}
.cm-form input:focus, .cm-form textarea:focus { border-color: var(--wp--preset--color--gold); outline: none; }
.cm-form label {
  display: block; margin-bottom: 0.45rem;
  font-size: var(--wp--preset--font-size--x-small); font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--cm-label);
}
.cm-form .cm-field + .cm-field { margin-top: 1.35rem; }

/* --- Footer --------------------------------------------------------------- */

.cm-footer a { color: inherit; }
.cm-footer .wp-block-navigation { gap: 1.5rem 2rem; }

/* ==========================================================================
   Motion
   Restrained by design: things arrive from slightly below and settle. Nothing
   bounces, nothing loops, nothing moves once it has landed. Every rule here is
   switched off under prefers-reduced-motion at the foot of this file.
   ========================================================================== */

/* Reveal on scroll. The class is added by JavaScript, so with scripting off
   the content simply renders — it is never hidden by CSS alone. */
/* Note: opacity and transform here make each revealed element a compositing
   group while it is animating, which suppresses backdrop-filter on anything
   inside it (the outline button's chip, the contact card). Both settle to
   opacity 1 / transform none once revealed, so the grouping is temporary — but
   never apply these to an ancestor of the header's blur layers. */
.cm-reveal {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
}
.cm-reveal.is-in {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.85s var(--cm-ease) var(--cm-delay, 0ms),
    transform 0.85s var(--cm-ease) var(--cm-delay, 0ms);
}

/* The gold rules draw themselves in from the left */
.cm-reveal.wp-block-separator {
  transform: scaleX(0);
  transform-origin: left center;
  opacity: 1;
}
.cm-reveal.wp-block-separator.is-in {
  transform: scaleX(1);
  transition: transform 0.9s var(--cm-ease) var(--cm-delay, 0ms);
}

/* Hero photograph fades up as it settles. Driven entirely by the keyframes
   below (animation-fill-mode: both), never by a JavaScript-added class — the
   photograph must be visible even if the script never runs. */

/* Header lifts in on first load.

   The animation is applied to the inner content group, never to .cm-header
   itself. `animation-fill-mode: both` keeps opacity and transform attached to
   the element permanently, and any of those on an ancestor makes Chrome resolve
   backdrop-filter against that element instead of the page — which silently
   kills the progressive blur underneath it. The header must stay free of every
   grouping property: opacity, transform, filter, mask, will-change, contain. */
.cm-header > .wp-block-group { animation: cm-header-in 900ms var(--cm-ease) both; }
@keyframes cm-header-in {
  from { opacity: 0; transform: translate3d(0, -10px, 0); }
  to   { opacity: 1; transform: none; }
}

/* --- Refined interaction states ------------------------------------------ */

/* Buttons: a small lift and a deepening ground */
.wp-block-button__link {
  transition:
    background-color 0.35s var(--cm-ease),
    color 0.35s var(--cm-ease),
    border-color 0.35s var(--cm-ease),
    transform 0.35s var(--cm-ease),
    box-shadow 0.35s var(--cm-ease);
}
.wp-block-button__link:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(9, 49, 72, 0.16);
}
.wp-block-button__link:active { transform: translateY(0); }

/* Cards: the gold hairline at the top edge draws across on hover */
.cm-card { position: relative; }
.cm-card::after {
  content: "";
  position: absolute; left: 0; right: 0; top: -1px; height: 2px;
  background: var(--wp--preset--color--gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.55s var(--cm-ease);
}
.cm-card:hover::after { transform: scaleX(1); }

/* Navigation underline sweeps rather than snaps */
.cm-nav .wp-block-navigation-item__content {
  position: relative;
  border-bottom-color: transparent;
}
.cm-nav .wp-block-navigation-item__content::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--wp--preset--color--gold);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.4s var(--cm-ease);
}
.cm-nav .wp-block-navigation-item__content:hover::after {
  transform: scaleX(1);
  transform-origin: left center;
}

/* Site title reacts gently to the pointer */
.cm-lockup .wp-block-site-logo img { transition: transform 0.6s var(--cm-ease); }
.cm-lockup:hover .wp-block-site-logo img { transform: translateY(-2px); }

/* Anchor jumps ease rather than snap */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ==========================================================================
   Photographic band
   A concise point of view gives the image a useful role between sections,
   while keeping the photograph itself completely unobscured.
   ========================================================================== */

.cm-band {
  min-height: 28vh !important;
  overflow: hidden;
  position: relative;
}
.cm-band > .wp-block-cover__background {
  display: none;
}
.cm-band > .wp-block-cover__inner-container {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  width: 100%;
  text-align: center;
}
.cm-band__content {
  max-width: 58rem;
  margin-inline: auto !important;
  padding: clamp(1.25rem, 2vw, 2rem) clamp(1.5rem, 4vw, 4rem);
  text-align: center;
}
.cm-band__content h2 {
  max-width: 27ch;
  margin: 0 auto;
  color: var(--wp--preset--color--paper) !important;
  text-shadow: 0 1px 12px rgba(5, 31, 47, 0.7);
}
.cm-band__rule {
  width: 4.25rem;
  height: 2px;
  margin: 1.35rem auto;
  border: 0;
  background: var(--wp--preset--color--gold);
  opacity: 1;
}
.cm-band__lead {
  max-width: none;
  margin: 0 auto;
  color: var(--wp--preset--color--paper);
  font-size: var(--wp--preset--font-size--large);
  line-height: 1.55;
  text-shadow: 0 1px 10px rgba(5, 31, 47, 0.72);
}

@media (min-width: 782px) {
  .cm-band__lead { white-space: nowrap; }
}

/* Scroll-driven, so it costs no JavaScript and cannot jank. Browsers without
   scroll-driven animations simply show a still photograph. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .cm-band .wp-block-cover__image-background {
      /* Oversized so the drift never exposes an edge */
      transform: scale(1.16);
      animation: cm-band-drift linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
    @keyframes cm-band-drift {
      from { transform: translate3d(0, -5%, 0) scale(1.16); }
      to   { transform: translate3d(0, 5%, 0) scale(1.16); }
    }
  }
}

/* --- The ornament is the logo's own mark -----------------------------------
   Painted from the supplied artwork rather than drawn in SVG, so the divider
   carries the real logo. A relative URL keeps it portable across domains.
   It rises gently with the rest of the section instead of being stroked on. */

.cm-ornament__mark {
  display: block;
  width: 44px;
  height: 38px;
  background: url("assets/images/logo-mark.png") no-repeat center center / contain;
}

/* --- Hero headline arrives a line at a time ------------------------------- */

.cm-hero h1 .cm-line {
  display: block;
  overflow: hidden;
}
.cm-hero h1 .cm-line > span {
  display: block;
  transform: translate3d(0, 105%, 0);
}
.cm-hero h1.is-in .cm-line > span {
  transform: none;
  transition: transform 1s var(--cm-ease) var(--cm-line-delay, 0ms);
}

/* ==========================================================================
   Legal pages (Imprint, Privacy policy)
   Long, reference-style reading: an index that stays in view, clear breaks
   between sections, and a measure short enough to read comfortably.
   ========================================================================== */

.cm-legal-index__list {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  border-left: 1px solid var(--wp--preset--color--sand-divider);
}
.cm-legal-index__list li { margin: 0; }
.cm-legal-index__list a {
  display: block;
  margin-left: -1px;
  padding: 0.5rem 0 0.5rem 1.1rem;
  border-left: 1px solid transparent;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--wp--preset--color--slate);
  transition: color 0.3s var(--cm-ease), border-color 0.3s var(--cm-ease);
}
.cm-legal-index__list a:hover,
.cm-legal-index__list a.is-current {
  color: var(--wp--preset--color--navy);
  border-left-color: var(--wp--preset--color--gold);
}
.cm-legal-index__related {
  margin-top: 2rem;
  font-size: var(--wp--preset--font-size--small);
  color: var(--cm-label);
}
.cm-legal-index__related a {
  color: var(--wp--preset--color--navy);
  border-bottom: 1px solid var(--wp--preset--color--sand-line);
}

/* The index follows the reader on wider screens only; on a phone it simply
   sits above the text. The offset clears the sticky header. */
@media (min-width: 782px) {
  .cm-legal-index { position: sticky; top: 10rem; }
}

.cm-legal__section {
  padding-block: 2.5rem;
  border-top: 1px solid var(--wp--preset--color--sand-divider);
}
.cm-legal .cm-meta + .cm-legal__section { margin-top: 1.75rem; }
.cm-legal__section > .cm-legal__heading {
  margin: 0;
  /* Jumping from the index should land below the sticky header, not under it */
  scroll-margin-top: 10rem;
}
.cm-legal__section > p { max-width: 68ch; margin-block-start: 1.1rem; }

/* Company details: a label / value card rather than a run of paragraphs */
.cm-legal-details {
  display: grid;
  grid-template-columns: minmax(10rem, 15rem) 1fr;
  gap: 0;
  margin-top: 1.5rem;
  border: 1px solid var(--wp--preset--color--sand-line);
  background-color: var(--wp--preset--color--paper);
}
.cm-legal-details > p {
  margin: 0;
  padding: 0.9rem 1.5rem;
  border-top: 1px solid var(--wp--preset--color--sand-divider);
}
.cm-legal-details > p:nth-child(-n+2) { border-top: 0; }
.cm-legal-details__label {
  font-size: var(--wp--preset--font-size--x-small);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cm-label);
  padding-top: 1.05rem !important;
}
.cm-legal-details__value { color: var(--wp--preset--color--navy); }

@media (max-width: 781px) {
  .cm-legal-details { grid-template-columns: 1fr; }
  .cm-legal-details > p { border-top: 0; }
  .cm-legal-details__label { padding-bottom: 0 !important; padding-top: 1rem !important; }
  .cm-legal-details__label:not(:first-child) { border-top: 1px solid var(--wp--preset--color--sand-divider); }
  .cm-legal-details__value { padding-top: 0.2rem; }
}

/* --- Motion / print ------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important; scroll-behavior: auto !important;
  }
  .cm-card:hover { transform: none; }
  .wp-block-button__link:hover { transform: none; box-shadow: none; }
  /* Anything staged for a reveal must be shown outright */
  .cm-reveal { opacity: 1 !important; transform: none !important; }
  .cm-reveal.wp-block-separator { transform: scaleX(1) !important; }
  .cm-hero .wp-block-cover__image-background { opacity: 1 !important; animation: none !important; }
  .cm-band .wp-block-cover__image-background { animation: none !important; transform: none !important; }
  .cm-hero h1 .cm-line > span { transform: none !important; }
}

@media print {
  .cm-header, .cm-footer, .wp-block-buttons { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
}

/* Footer carries the reversed lockup. A relative URL keeps it portable across
   domains, and a background image avoids needing PHP inside a template part. */
.cm-footer-mark {
  width: 208px; height: 54px;
  background: url("assets/images/logo-lockup-light.png") no-repeat left center / contain;
}
@media (max-width: 781px) {
  .cm-footer-mark { width: 176px; height: 46px; }
}

/* Hero copy column — keeps the headline clear of the sailboat */
.cm-hero__copy { max-width: 40rem; }
@media (max-width: 781px) { .cm-hero__copy { max-width: none; } }

/* Equal-height cards in a row of cards.
   Scoped to :only-child so it applies to card grids (where matching heights
   matter) but not to a column that pairs a card with other copy, where the
   card should keep its natural height. */
.wp-block-columns .wp-block-column:has(> .cm-card:only-child) {
  display: flex;
  flex-direction: column;
}
.wp-block-columns .wp-block-column > .cm-card:only-child { flex: 1 1 auto; }

/* Numbered service cards keep the number tight to the heading */
.cm-card .cm-card__num { margin: 0; }

/* Give section headings a comfortable measure. WordPress's constrained layout
   auto-centres anything narrower than the content width, so the start margin
   has to be reset with the same weight it was set.

   Explicitly centred headings are exempt — the reset was overriding their
   alignment and pinning them to the left of the section. */
.cm-eyebrow + .wp-block-heading:not(.has-text-align-center) {
  max-width: 24ch;
  margin-inline-start: 0 !important;
  margin-inline-end: auto !important;
}
.cm-eyebrow + .wp-block-heading.has-text-align-center { max-width: 30ch; }
.wp-block-column .cm-eyebrow + .wp-block-heading { max-width: none; }

/* ==========================================================================
   Responsive layout
   The theme's blocks already collapse naturally. These rules complete that
   behaviour at the edges: an earlier tablet menu, viewport-safe forms,
   touch-sized controls and tighter (but still editorial) mobile rhythm.
   ========================================================================== */

/* Use the compact navigation before six labels begin to crowd the lockup. */
@media (max-width: 900px) {
  /* The dropdown is positioned from the header itself. Keeping the constrained
     inner group and navigation static lets the panel span the full viewport. */
  .cm-header > .wp-block-group {
    position: static;
    animation: none;
  }

  .cm-lockup,
  .cm-nav > .wp-block-navigation__responsive-container-open {
    position: relative;
    z-index: 2;
  }

  .cm-nav { position: static; }

  /* This is the existing navbar blur physically extending into the dropdown.
     Its 20rem reach matches the six-link mobile menu, so it grows as one
     continuous surface instead of becoming a second glass panel. */
  .cm-header:has(.cm-nav .wp-block-navigation__responsive-container.is-menu-open)
  .cm-header__blur {
    bottom: -20rem;
  }

  /* Keep a substantial base blur behind every link. The strongest layers still
     taper downward, but the 1px + 2px + 4px layers remain through Contact. */
  .cm-header:has(.cm-nav .wp-block-navigation__responsive-container.is-menu-open)
  .cm-header__blur > span:nth-child(1),
  .cm-header:has(.cm-nav .wp-block-navigation__responsive-container.is-menu-open)
  .cm-header__blur > span:nth-child(2),
  .cm-header:has(.cm-nav .wp-block-navigation__responsive-container.is-menu-open)
  .cm-header__blur > span:nth-child(3) {
    -webkit-mask-image: none;
            mask-image: none;
  }

  .cm-header:has(.cm-nav .wp-block-navigation__responsive-container.is-menu-open)
  .cm-header__blur > span:nth-child(4) {
    -webkit-mask-image: linear-gradient(to bottom, #fff 0%, #fff 88%, transparent 100%);
            mask-image: linear-gradient(to bottom, #fff 0%, #fff 88%, transparent 100%);
  }

  .cm-header:has(.cm-nav .wp-block-navigation__responsive-container.is-menu-open)
  .cm-header__blur > span:nth-child(5) {
    -webkit-mask-image: linear-gradient(to bottom, #fff 0%, #fff 76%, transparent 90%);
            mask-image: linear-gradient(to bottom, #fff 0%, #fff 76%, transparent 90%);
  }

  .cm-nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: none !important;
  }

  .cm-nav .wp-block-navigation__responsive-container-open {
    display: inline-flex !important;
  }

  .cm-nav:has(.wp-block-navigation__responsive-container.is-menu-open)
  > .wp-block-navigation__responsive-container-open {
    visibility: hidden;
    pointer-events: none;
  }

  .cm-nav .wp-block-navigation__responsive-container-open,
  .cm-nav .wp-block-navigation__responsive-container-close {
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    color: var(--wp--preset--color--navy);
  }

  .cm-nav .wp-block-navigation__responsive-container-close {
    position: fixed;
    top: 2.4rem;
    right: var(--wp--preset--spacing--30);
    z-index: 100002;
  }

  .cm-nav .wp-block-navigation__responsive-container-open svg,
  .cm-nav .wp-block-navigation__responsive-container-close svg {
    width: 26px;
    height: 26px;
  }

  .cm-nav .wp-block-navigation__responsive-container.is-menu-open {
    position: absolute !important;
    inset: 100% 0 auto 0 !important;
    width: 100%;
    height: auto !important;
    min-height: 0;
    max-width: none;
    max-height: calc(100dvh - 7rem);
    margin: 0;
    padding: 0.65rem var(--wp--preset--spacing--30) 1.25rem;
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 2 !important;
    isolation: auto;
    background: transparent !important;
    border: 0;
    box-shadow: none;
    /* Core's overlay animation leaves an identity transform behind. That would
       turn this dropdown into the containing block for the fixed close icon. */
    animation: none !important;
    transform: none !important;
  }

  /* The dropdown repeats the header's five-layer blur verbatim. There is no
     tint or frosted panel: each masked layer dissolves into the page beneath,
     exactly as the existing navigation does. */
  .cm-nav .wp-block-navigation__responsive-container.is-menu-open::before,
  .cm-nav .wp-block-navigation__responsive-container.is-menu-open::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background: transparent;
  }

  .cm-nav .wp-block-navigation__responsive-container.is-menu-open::before {
    -webkit-backdrop-filter: blur(1px);
            backdrop-filter: blur(1px);
    -webkit-mask-image: linear-gradient(to bottom, #fff 0%, #fff 84%, transparent 100%);
            mask-image: linear-gradient(to bottom, #fff 0%, #fff 84%, transparent 100%);
  }

  .cm-nav .wp-block-navigation__responsive-container.is-menu-open::after {
    z-index: -1;
    -webkit-backdrop-filter: blur(2px);
            backdrop-filter: blur(2px);
    -webkit-mask-image: linear-gradient(to bottom, #fff 0%, #fff 70%, transparent 86%);
            mask-image: linear-gradient(to bottom, #fff 0%, #fff 70%, transparent 86%);
  }

  .cm-nav .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content {
    position: relative;
    z-index: 1;
    isolation: auto;
    align-items: stretch;
    padding-top: 0;
    transform-origin: top center;
    animation: cm-mobile-menu-content-in 420ms var(--cm-ease) both;
  }

  .cm-nav .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content::before,
  .cm-nav .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content::after,
  .cm-nav .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__container::before {
    content: "";
    position: absolute;
    inset: -0.65rem -1.5rem -1.25rem;
    z-index: -1;
    pointer-events: none;
    background: transparent;
  }

  .cm-nav .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content::before {
    -webkit-backdrop-filter: blur(4px);
            backdrop-filter: blur(4px);
    -webkit-mask-image: linear-gradient(to bottom, #fff 0%, #fff 58%, transparent 74%);
            mask-image: linear-gradient(to bottom, #fff 0%, #fff 58%, transparent 74%);
  }

  .cm-nav .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content::after {
    -webkit-backdrop-filter: blur(6.5px);
            backdrop-filter: blur(6.5px);
    -webkit-mask-image: linear-gradient(to bottom, #fff 0%, #fff 46%, transparent 62%);
            mask-image: linear-gradient(to bottom, #fff 0%, #fff 46%, transparent 62%);
  }

  .cm-nav .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__container,
  .cm-nav .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item {
    align-items: stretch;
    gap: 0;
    width: 100%;
  }

  .cm-nav .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__container {
    position: relative;
    isolation: auto;
  }

  .cm-nav .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__container::before {
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    -webkit-mask-image: linear-gradient(to bottom, #fff 0%, #fff 34%, transparent 50%);
            mask-image: linear-gradient(to bottom, #fff 0%, #fff 34%, transparent 50%);
  }

  /* No second menu effect: the header's own five layers above are the only
     blur source. These pseudo layers are deliberately disabled. */
  .cm-nav .wp-block-navigation__responsive-container.is-menu-open::before,
  .cm-nav .wp-block-navigation__responsive-container.is-menu-open::after,
  .cm-nav .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content::before,
  .cm-nav .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content::after,
  .cm-nav .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__container::before {
    content: none;
  }

  .cm-nav .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item__content {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 48px;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--wp--preset--color--sand-divider);
    color: var(--wp--preset--color--navy) !important;
    font-size: 1rem;
  }

  .cm-header.cm-header--on-dark .cm-nav
  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item__content,
  .cm-header.cm-header--on-dark .cm-nav
  .wp-block-navigation__responsive-container-close {
    color: var(--wp--preset--color--paper) !important;
  }

  .cm-header.cm-header--on-dark .cm-nav
  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item__content {
    border-bottom-color: color-mix(in srgb, var(--wp--preset--color--paper) 28%, transparent);
  }

  .cm-nav .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item__content::after {
    display: none;
  }

  .cm-arrow-link a,
  a.cm-arrow-link,
  .cm-footer .wp-block-navigation-item__content,
  .cm-footer p a {
    min-height: 44px;
  }

  .cm-footer .wp-block-navigation-item__content,
  .cm-footer p a {
    display: inline-flex;
    align-items: center;
  }

  html.has-modal-open:has(.cm-header .cm-nav .wp-block-navigation__responsive-container.is-menu-open) {
    overflow-y: auto;
  }

  @keyframes cm-mobile-menu-content-in {
    from { opacity: 0; transform: translate3d(0, -0.75rem, 0); }
    to { opacity: 1; transform: none; }
  }

}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  @media (max-width: 900px) {
    .cm-nav .wp-block-navigation__responsive-container.is-menu-open {
      background: var(--wp--preset--color--paper) !important;
    }
  }
}

@media (max-width: 781px) {
  .cm-header {
    padding-bottom: 1.7rem !important;
  }

  .cm-header__blur { bottom: -1.7rem; }

  .cm-hero {
    min-height: max(42rem, 100svh) !important;
    padding-top: clamp(6.75rem, 28vw, 8rem) !important;
    padding-bottom: clamp(4.5rem, 16vw, 6rem) !important;
  }

  .cm-hero__copy { max-width: none; }
  .cm-hero .cm-rule { margin-block: 1.5rem !important; }

  /* Inline block spacing remains editable in WordPress; on phones this cap
     keeps each section from feeling like a desktop layout squeezed smaller. */
  .entry-content > .wp-block-group.alignfull:not(.cm-hero):not(.cm-band),
  #cm-main > .wp-block-group.alignfull {
    padding-top: clamp(3.5rem, 14vw, 4.5rem) !important;
    padding-bottom: clamp(3.5rem, 14vw, 4.5rem) !important;
  }

  .entry-content .wp-block-columns,
  #cm-main > .wp-block-group > .wp-block-columns {
    gap: clamp(1.5rem, 7vw, 2.25rem) !important;
  }

  .cm-card {
    padding: clamp(1.35rem, 6vw, 1.75rem) !important;
  }

  .cm-band {
    min-height: clamp(18rem, 70vw, 23rem) !important;
    padding: 0 !important;
  }

  .cm-band__content { padding-block: 2.5rem; }

  .cm-ornament { gap: 0.85rem; }
  .cm-ornament svg { width: 58px; height: auto; }

  .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
  }

  .cm-form input[type="text"],
  .cm-form input[type="email"],
  .cm-form input[type="tel"],
  .cm-form textarea,
  .cm-form select {
    min-height: 48px;
    max-width: 100%;
    font-size: 1rem;
  }

  .cm-form textarea { min-height: 10rem; resize: vertical; }
  .cm-form .wp-block-button,
  .cm-form .wp-block-button__link { width: 100%; }

  .cm-footer {
    padding-top: 3.75rem !important;
    padding-bottom: 2rem !important;
  }

  .cm-footer > .wp-block-columns {
    gap: 2.5rem !important;
  }

  /* Long URLs, post titles and client-edited copy must wrap rather than push
     the layout beyond the viewport. */
  :where(h1, h2, h3, h4, h5, h6, p, li, a) {
    overflow-wrap: break-word;
  }

  .wp-block-table {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 480px) {
  .cm-header {
    padding-top: 0.5rem !important;
    padding-bottom: 1.4rem !important;
  }

  .cm-header__blur { bottom: -1.4rem; }

  .cm-header > .wp-block-group.alignwide { gap: 1rem; }

  .cm-card { padding: 1.25rem !important; }

  .cm-footer > .wp-block-group.alignwide:last-child {
    align-items: flex-start;
    gap: 0.25rem 1.25rem;
  }

  .cm-footer > .wp-block-group.alignwide:last-child > p {
    width: 100%;
  }
}

/* A short landscape phone needs content-led height instead of a rigid screen. */
@media (max-width: 900px) and (orientation: landscape) {
  .cm-hero { min-height: 40rem !important; }
}

/* Language is a separate action from page navigation. The navy control and
   paper menu use the brand palette, with gold reserved for the small icon. */
.cm-language-switcher {
  position: relative;
  z-index: 5;
  flex: 0 0 auto;
  font-family: var(--wp--preset--font-family--inter);
  font-size: .8125rem;
  font-weight: 600;
}
.cm-language-switcher details { position: relative; }
.cm-language-switcher summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 44px;
  padding: 0 .85rem;
  background: var(--wp--preset--color--navy);
  color: var(--wp--preset--color--paper);
  border: 1px solid var(--wp--preset--color--navy);
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
  transition: background-color .2s var(--cm-ease), border-color .2s var(--cm-ease);
}
.cm-language-switcher summary::-webkit-details-marker { display: none; }
.cm-language-switcher summary:hover,
.cm-language-switcher details[open] summary { background: var(--wp--preset--color--slate); }
.cm-language-switcher summary:focus-visible,
.cm-language-switcher a:focus-visible { outline: 2px solid var(--wp--preset--color--gold); outline-offset: 3px; }
.cm-language-switcher svg { flex: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.cm-language-switcher__globe { width: 18px; height: 18px; color: var(--wp--preset--color--gold); }
.cm-language-switcher__chevron { width: 10px; height: 7px; transition: transform .2s var(--cm-ease); }
.cm-language-switcher details[open] .cm-language-switcher__chevron { transform: rotate(180deg); }
.cm-language-switcher ul {
  position: absolute;
  right: 0;
  top: calc(100% + .5rem);
  z-index: 10;
  min-width: 12rem;
  margin: 0;
  padding: .4rem;
  list-style: none;
  background: var(--wp--preset--color--paper);
  color: var(--wp--preset--color--navy);
  border: 1px solid var(--wp--preset--color--sand-line);
  border-top: 2px solid var(--wp--preset--color--gold);
  box-shadow: 0 12px 28px rgba(9, 49, 72, .16);
}
.cm-language-switcher a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 44px;
  padding: .55rem .75rem;
  color: inherit;
  text-decoration: none;
}
.cm-language-switcher a:hover { background: var(--wp--preset--color--ivory); }
.cm-language-switcher a[aria-current] { font-weight: 700; }
.cm-language-switcher__check { color: var(--wp--preset--color--gold); font-size: 1rem; }
.cm-header.cm-header--on-dark .cm-language-switcher summary {
  background: var(--wp--preset--color--paper);
  color: var(--wp--preset--color--navy);
  border-color: var(--wp--preset--color--paper);
}
.cm-header.cm-header--on-dark .cm-language-switcher summary:hover,
.cm-header.cm-header--on-dark .cm-language-switcher details[open] summary {
  background: var(--wp--preset--color--ivory);
}
.cm-header > .wp-block-group > .cm-nav { margin-left: auto; }
@media (max-width: 480px) {
  .cm-header > .wp-block-group.alignwide:has(.cm-language-switcher) { gap: .5rem; }
}

/* The supplied sailboat sits on the right; keep it in the narrow hero crop.
   A light scrim keeps navy copy readable over the darker mountains and water. */
.cm-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(250, 247, 242, .78) 0%, rgba(250, 247, 242, .55) 42%, rgba(250, 247, 242, 0) 75%);
}
@media (max-width: 781px) {
  .cm-hero .wp-block-cover__image-background { object-position: 78% center; }
  .cm-hero::before { background: rgba(250, 247, 242, .72); }
}