/* NexGen's quiet lift and coloured shadow, adapted to La Maison green. */
.button {
  --button-bg: var(--green);
  --button-border: var(--green);
  --button-ink: #fff;
  --button-hover-bg: #337b58;
  --button-hover-border: #337b58;
  --button-hover-ink: #fff;
  --button-hover-shadow: 0 8px 24px #28634766;
  --button-focus: var(--green);
  --button-ease: cubic-bezier(.25,.46,.45,.94);
  transition: transform .3s var(--button-ease), background-color .3s var(--button-ease),
    border-color .3s var(--button-ease), color .3s var(--button-ease), box-shadow .3s var(--button-ease);
  touch-action: manipulation;
}
.button.light, .service-hero .button {
  --button-bg: var(--sage);
  --button-border: var(--sage);
  --button-ink: var(--green-deep);
  --button-hover-bg: var(--sage-light);
  --button-hover-border: var(--sage-light);
  --button-hover-ink: var(--green-deep);
  --button-hover-shadow: 0 8px 24px var(--sage-glow);
  --button-focus: var(--sage);
}
.button.outline {
  --button-bg: transparent;
  --button-border: var(--green);
  --button-ink: var(--green);
  --button-hover-bg: var(--green);
  --button-hover-border: var(--green);
  --button-hover-ink: #fff;
  --button-hover-shadow: none;
}
.button.outline-light, .service-hero .button.outline-light {
  --button-bg: transparent;
  --button-border: #ffffff69;
  --button-ink: #fff;
  --button-hover-bg: #fff;
  --button-hover-border: #fff;
  --button-hover-ink: #181818;
  --button-hover-shadow: none;
  --button-focus: var(--sage);
}
.button.header-quote, .button.nav-quote, .hero .button { --button-focus: var(--sage); }

/* Keyboard focus has the same colour feedback and a distinct visible ring. */
.button:where(:not(:disabled):not([aria-disabled="true"])):is(:focus-visible, :active) {
  background: var(--button-hover-bg);
  border-color: var(--button-hover-border);
  color: var(--button-hover-ink);
  box-shadow: var(--button-hover-shadow);
}
.button:focus-visible { outline: 2px solid var(--button-focus); outline-offset: 4px; }
/* Touchscreens use press feedback without retaining a sticky hover state. */
@media (hover: hover) and (pointer: fine) {
  .button:where(:not(:disabled):not([aria-disabled="true"])):hover {
    background: var(--button-hover-bg);
    border-color: var(--button-hover-border);
    color: var(--button-hover-ink);
    box-shadow: var(--button-hover-shadow);
  }
}
@media (prefers-reduced-motion: no-preference) {
  .button:where(:not(:disabled):not([aria-disabled="true"])):focus-visible { transform: translateY(-2px); }
  @media (hover: hover) and (pointer: fine) {
    .button:where(:not(:disabled):not([aria-disabled="true"])):hover { transform: translateY(-2px); }
  }
  .button:where(:not(:disabled):not([aria-disabled="true"])):active { transform: translateY(0) scale(.985); }
}
@media (prefers-reduced-motion: reduce) {
  .button { transition: none; }
}
@media (forced-colors: active) {
  .button:focus-visible { outline-color: Highlight; }
}

/* Main action pairs share a full-width stack on phones. */
@media (max-width: 639px) {
  .hero .actions,
  .service-hero .actions:has(> .button + .button),
  .contact-actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }
  .hero .actions > .button,
  .service-hero .actions:has(> .button + .button) > .button,
  .contact-actions > .button {
    width: 100%;
    min-height: 50px;
    padding: 14px 22px;
    font-size: 14px;
  }
}

/* Persistent contact and scroll controls, clear of the mobile menu and keyboard. */
.floating-actions {
  position: fixed;
  right: max(20px, env(safe-area-inset-right));
  bottom: calc(24px + env(safe-area-inset-bottom));
  z-index: 25;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  pointer-events: none;
}
.floating-action {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #fff;
  box-shadow: 0 6px 22px #16362430;
  pointer-events: auto;
  touch-action: manipulation;
  transition: transform .25s ease, box-shadow .25s ease, opacity .25s ease, visibility .25s ease;
}
.floating-whatsapp { width: 56px; height: 56px; background: #25d366; color: #123c27; }
.floating-whatsapp svg { width: 28px; height: 28px; }
.floating-top { width: 44px; height: 44px; background: var(--green); opacity: 0; visibility: hidden; transform: translateY(8px); }
.floating-top svg { width: 21px; height: 21px; }
.floating-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.floating-action:focus-visible { outline: 3px solid #548bdf; outline-offset: 4px; }
body:has(#navigation.open) .floating-actions,
body:has(dialog[open]) .floating-actions { visibility: hidden; }
body:has(#navigation.open) .floating-action,
body:has(dialog[open]) .floating-action { visibility: hidden; }
@media (max-width: 639px) {
  body:has(#enquiry-form :is(input, select, textarea):focus) .floating-actions,
  body:has(#enquiry-form :is(input, select, textarea):focus) .floating-action { visibility: hidden; }
}
@media (hover: hover) and (pointer: fine) {
  .floating-action:hover { transform: translateY(-2px); box-shadow: 0 9px 26px #16362445; }
}
@media (prefers-reduced-motion: reduce) {
  .floating-action { transition: none; transform: none; }
  .floating-action:hover { transform: none; }
}