/* Buttons in the site's own palette: cream (--paper) and deep green (--ink) pills,
   hairline outlines where the original design used them, and a quiet gold arrow accent.
   Variants follow the surface each button sits on. */
html .btn {
  --btn-bg: var(--paper);
  --btn-fg: var(--ink);
  --btn-line: transparent;
  --btn-hover-bg: #fff;
  --btn-hover-fg: var(--ink);
  --btn-hover-line: transparent;
  --btn-arrow: currentColor;
  border: 1px solid var(--btn-line);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-weight: 500;
  letter-spacing: .015em;
  box-shadow: none;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease, transform .25s ease;
  touch-action: manipulation;
}
html .btn .ui-arrow { color: var(--btn-arrow); transition: transform .25s ease, color .25s ease; }
@media (hover: hover) and (pointer: fine) {
  html .btn:hover {
    background: var(--btn-hover-bg);
    color: var(--btn-hover-fg);
    border-color: var(--btn-hover-line);
    transform: translateY(-1px);
    box-shadow: 0 10px 24px -12px #0c140f73;
  }
  html .btn:hover .ui-arrow { transform: translate(2px, -2px); }
}
html .btn:active { transform: translateY(0); box-shadow: none; }
html .btn:disabled { opacity: .55; transform: none; box-shadow: none; cursor: not-allowed; }

/* Solid deep green: on the cream page sections, dialogs and the enquiry form. */
html .home-details .note-button.btn,
html dialog .note-button.btn,
html .enquiry-submit.btn,
html .project-filters .btn[aria-pressed='true'] {
  --btn-bg: var(--ink);
  --btn-fg: var(--paper);
  --btn-line: var(--ink);
  --btn-hover-bg: #34402f;
  --btn-hover-fg: var(--paper);
  --btn-hover-line: #34402f;
  --btn-arrow: #edcb8e;
}

/* Outline on dark imagery and the green services band. */
html .header-cta.btn,
html .service-row .btn {
  --btn-bg: #fdf1e10d;
  --btn-fg: var(--paper);
  --btn-line: #fdf1e166;
  --btn-hover-bg: var(--paper);
  --btn-hover-fg: var(--ink);
  --btn-hover-line: var(--paper);
  backdrop-filter: blur(6px);
}

/* Outline on cream: sticky nav and project filters. */
html .nav-enquire.btn,
html .project-filters .btn {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-line: #232b2333;
  --btn-hover-bg: var(--ink);
  --btn-hover-fg: var(--paper);
  --btn-hover-line: var(--ink);
}
html .project-filters .btn:not([aria-pressed='true']) { --btn-hover-bg: #ebe5d8; --btn-hover-fg: var(--ink); --btn-hover-line: #232b2333; }
html .project-filters .btn:hover { box-shadow: none; transform: none; }

/* Focus: gold ring on dark surfaces, deeper bronze on cream. */
html .btn:focus-visible { outline: 2px solid #edcb8e; outline-offset: 4px; }
html .home-details .btn:focus-visible,
html dialog .btn:focus-visible,
html .enquiry-form .btn:focus-visible { outline-color: #8a6d35; }
html .services-section .btn:focus-visible { outline-color: #edcb8e; }

/* Sizing and arrows. */
html .ui-arrow { display: inline-flex; align-items: center; justify-content: center; width: 1em; height: 1em; flex: 0 0 auto; line-height: 1; }
html .ui-arrow svg { display: block; width: 100%; height: 100%; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; }
html .service-enquire .ui-arrow { width: .9em; height: .9em; margin-left: .3em; vertical-align: -.05em; }
html .btn .ui-arrow { width: 14px; height: 14px; }
html .service-row .btn { border-radius: 999px; padding: 11px 18px; gap: 14px; margin-top: 3px; border-bottom-width: 1px; }
html .header-cta.btn { min-height: 44px; }
html .hero-tags { gap: 12px; }
html .hero-tags a.btn { min-height: 43px; }
html .project-filters { gap: 8px; }
html .enquiry-submit.btn { min-height: 54px; padding-inline: 24px; }
html .gallery-controls button.btn,
html .dialog-close.btn,
html .project-open.btn { width: 40px; height: 40px; }
html .sight-nav.btn,
html .gallery-controls button.btn,
html .dialog-close.btn,
html .project-open.btn { box-shadow: 0 6px 18px -8px #0c140f59; }
@media(max-width: 640px) {
  html .header-cta.btn { min-height: 40px; padding-inline: 12px; }
  html .hero-tags a.btn { min-height: 40px; }
  html .hero-tags { gap: 8px; }
  html .nav-enquire.btn { min-height: 38px; display: inline-flex; align-items: center; }
  html .project-filters { gap: 8px 6px; }
}
@media(prefers-reduced-motion: reduce) {
  html .btn, html .btn .ui-arrow { transition: none; }
  html .btn:hover, html .btn:hover .ui-arrow { transform: none; }
}
@media(forced-colors: active) {
  html .btn { border: 1px solid ButtonText; background: ButtonFace; color: ButtonText; box-shadow: none; }
  html .btn[aria-pressed='true'] { background: Highlight; color: HighlightText; }
}