:root {
  --page-inset: 3rem;
  --container: min(1160px, calc(100vw - (var(--page-inset) * 2)));
  --lf-mobile-nav-height: 4.5rem;
  --lf-mobile-nav-pad-x: clamp(1rem, 4.5vw, 1.5rem);
  --lf-mobile-nav-overlay: rgba(18, 15, 14, 0.42);
  --lf-mobile-nav-panel: #ffffff;
  --lf-mobile-nav-border: rgba(31, 29, 26, 0.1);
  --lf-mobile-nav-link: rgba(31, 29, 26, 0.86);
  --lf-mobile-nav-link-active: #b6a078;
  --lf-mobile-nav-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --lf-mobile-nav-duration: 0.34s;
}

.lf-mobile-nav {
  display: none;
}

@media (max-width: 960px) {
  .lf-mobile-nav {
    display: block;
  }

  body.menu-open {
    overflow: hidden;
    padding-right: var(--scrollbar-w, 0px);
    touch-action: none;
  }

  body.menu-open .grain {
    opacity: 0;
    animation: none;
  }

  .site-header .header-inner {
    display: none !important;
  }

  .lf-mobile-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    /* Avoid `inset: 0` + classic `100vh` mismatch with iOS visual viewport (white band behind chrome). */
    height: 100vh;
    height: 100dvh;
    z-index: 180;
    pointer-events: none;
    background: transparent;
  }

  .lf-mobile-nav__surface {
    position: absolute;
    inset: 0 0 auto 0;
    padding-top: env(safe-area-inset-top, 0px);
    min-height: var(--lf-mobile-nav-height);
    border-bottom: 1px solid var(--lf-mobile-nav-border);
    /* Opaque background — a backdrop-filter here has no visible effect but
       forces the GPU to blur every scroll frame, so it was removed. */
    background: #ffffff;
    transition: transform var(--lf-mobile-nav-duration) var(--lf-mobile-nav-ease);
    pointer-events: auto;
  }

  .lf-mobile-nav.is-hidden:not(.is-open) .lf-mobile-nav__surface {
    transform: translateY(calc(-100% - 2px));
  }

  .lf-mobile-nav__inner {
    width: min(calc(100% - (var(--lf-mobile-nav-pad-x) * 2)), var(--container));
    min-height: var(--lf-mobile-nav-height);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }

  .lf-mobile-nav__brand {
    font-family: "Montserrat", "Century Gothic", "Futura", "Avenir Next",
      "Helvetica Neue", system-ui, sans-serif;
    font-size: 1.18rem;
    line-height: 1;
    font-weight: 300;
    letter-spacing: 0.06em;
    color: #1f1d1a;
    text-decoration: none;
  }

  .lf-mobile-nav__toggle {
    width: 2rem;
    height: 2rem;
    margin-left: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #1f1d1a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    appearance: none;
    -webkit-appearance: none;
    transition: color 0.24s ease, opacity 0.24s ease;
  }

  .lf-mobile-nav__toggle:hover,
  .lf-mobile-nav__toggle:focus-visible {
    opacity: 0.72;
  }

  .lf-mobile-nav__toggle-icon {
    position: relative;
    width: 1.4rem;
    height: 0.95rem;
  }

  .lf-mobile-nav__toggle-icon span {
    position: absolute;
    left: 0;
    right: 0;
    height: 1.5px;
    border-radius: 999px;
    background: currentColor;
    transform-origin: center;
    transition: top var(--lf-mobile-nav-duration) var(--lf-mobile-nav-ease),
      transform var(--lf-mobile-nav-duration) var(--lf-mobile-nav-ease),
      opacity 0.2s ease;
  }

  .lf-mobile-nav__toggle-icon span:nth-child(1) {
    top: 0;
  }

  .lf-mobile-nav__toggle-icon span:nth-child(2) {
    top: 0.44rem;
  }

  .lf-mobile-nav__toggle-icon span:nth-child(3) {
    top: 0.88rem;
  }

  .lf-mobile-nav.is-open .lf-mobile-nav__toggle-icon span:nth-child(1) {
    top: 0.44rem;
    transform: rotate(45deg);
  }

  .lf-mobile-nav.is-open .lf-mobile-nav__toggle-icon span:nth-child(2) {
    opacity: 0;
  }

  .lf-mobile-nav.is-open .lf-mobile-nav__toggle-icon span:nth-child(3) {
    top: 0.44rem;
    transform: rotate(-45deg);
  }

  .lf-mobile-nav__backdrop {
    position: absolute;
    inset: 0;
    background: var(--lf-mobile-nav-overlay);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--lf-mobile-nav-duration) ease;
  }

  .lf-mobile-nav.is-open .lf-mobile-nav__backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  .lf-mobile-nav__drawer {
    position: absolute;
    inset: 0 0 0 auto;
    width: min(22.5rem, 100vw);
    padding: calc(var(--lf-mobile-nav-height) + env(safe-area-inset-top, 0px) + 1.2rem) var(--lf-mobile-nav-pad-x)
      2rem;
    background: var(--lf-mobile-nav-panel);
    border-left: 1px solid var(--lf-mobile-nav-border);
    box-shadow: -24px 0 60px rgba(17, 15, 12, 0.16);
    transform: translateX(102%);
    transition: transform 0.38s var(--lf-mobile-nav-ease);
    pointer-events: none;
    overflow-y: auto;
  }

  .lf-mobile-nav.is-open .lf-mobile-nav__drawer {
    transform: translateX(0);
    pointer-events: auto;
  }

  .lf-mobile-nav__drawer-close {
    position: absolute;
    top: env(safe-area-inset-top, 0px);
    right: var(--lf-mobile-nav-pad-x);
    width: 2rem;
    height: var(--lf-mobile-nav-height);
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    color: var(--lf-mobile-nav-link);
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  .lf-mobile-nav__drawer-close:focus,
  .lf-mobile-nav__drawer-close:active {
    outline: none;
  }

  .lf-mobile-nav__drawer-close:focus-visible {
    outline: 2px solid rgba(31, 29, 26, 0.42);
    outline-offset: 3px;
  }

  /* The close button icon spans are always in the X state — no transition needed */
  .lf-mobile-nav__drawer-close .lf-mobile-nav__toggle-icon span {
    transition: none;
  }

  .lf-mobile-nav__drawer-close .lf-mobile-nav__toggle-icon span:nth-child(1) {
    top: 0.44rem;
    transform: rotate(45deg);
  }

  .lf-mobile-nav__drawer-close .lf-mobile-nav__toggle-icon span:nth-child(2) {
    opacity: 0;
  }

  .lf-mobile-nav__drawer-close .lf-mobile-nav__toggle-icon span:nth-child(3) {
    top: 0.44rem;
    transform: rotate(-45deg);
  }

  .lf-mobile-nav__menu {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }

  .lf-mobile-nav__menu a {
    width: 100%;
    padding: 1rem 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border-bottom: 1px solid rgba(31, 29, 26, 0.08);
    color: var(--lf-mobile-nav-link);
    font-size: 0.8rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    text-decoration: none;
  }

  .lf-mobile-nav__menu a:hover {
    color: var(--lf-mobile-nav-link-active);
  }

  /* Keyboard focus: use neutral ink — not gold — so it never reads as "current page"
     and does not match the stuck WebKit :focus-visible ring users saw on HOME. */
  .lf-mobile-nav__menu a:focus-visible {
    outline: 2px solid rgba(31, 29, 26, 0.42);
    outline-offset: 3px;
    border-radius: 0;
  }

  .lf-mobile-nav__menu a:focus-visible:not([aria-current="page"]) {
    color: var(--lf-mobile-nav-link);
  }

  .lf-mobile-nav__menu a[aria-current="page"] {
    color: var(--lf-mobile-nav-link-active);
    border-bottom-color: rgba(182, 160, 120, 0.22);
  }
}

@media (max-width: 680px) {
  :root {
    --lf-mobile-nav-height: 4.3rem;
  }

  .scene-frame {
    height: auto;
    aspect-ratio: 16 / 10;
  }
}

@media (max-width: 960px) and (hover: none) and (pointer: coarse) {
  .lf-mobile-nav__toggle,
  .lf-mobile-nav__drawer-close,
  .lf-mobile-nav__menu a {
    -webkit-tap-highlight-color: transparent;
    tap-highlight-color: transparent;
  }

  .lf-mobile-nav__toggle:focus,
  .lf-mobile-nav__toggle:active,
  .lf-mobile-nav__drawer-close:focus,
  .lf-mobile-nav__drawer-close:active,
  .lf-mobile-nav__menu a:focus:not(:focus-visible),
  .lf-mobile-nav__menu a:active {
    outline: none;
    box-shadow: none;
  }
}

@media (max-width: 960px) {
  /*
    iOS Safari: fill the layout viewport behind the floating bottom chrome
    (default canvas is white). Pair with `theme-color` in HTML.
  */
  html {
    height: -webkit-fill-available;
    background-color: #f8f8f6;
  }

  body {
    min-height: 100vh;
    min-height: -webkit-fill-available;
    min-height: 100dvh;
    background-color: #f8f8f6;
  }

  .hero,
  .page-hero,
  .catalogue-hero {
    min-height: 100vh;
    min-height: 100dvh;
  }

  /* Scene frames: aspect-ratio keeps proportions when captions sit below the image. */
  .scene-frame {
    height: auto;
    aspect-ratio: 16 / 11;
  }
}

/* ==============================================================
   SAFE IMAGE LOADING
   Prevents the "black flash" while photos decode on mobile Safari.
   Every real content <img> starts invisible and fades in from its
   (already light-neutral) wrapper background only once the browser
   confirms it has been decoded — never a black/blank frame.
   Gated behind html.lf-js so images still render normally if the
   script never runs (JS disabled / blocked / failed to load).
   ============================================================== */
html.lf-js
  img:not(.lf-img-loaded):not(.lf-no-fade):not([data-safe-image="off"]):not(
    .lightbox__img
  ):not(.catalogue-product-img):not(.detail-sheet__img):not(
    .product-panel__img
  ):not(.product-panel__thumb img) {
  opacity: 0;
}

html.lf-js img.lf-img-loaded,
html.lf-js img.lf-no-fade,
html.lf-js img[data-safe-image="off"],
html.lf-js img.catalogue-product-img,
html.lf-js img.detail-sheet__img,
html.lf-js img.product-panel__img,
html.lf-js .product-panel__thumb img {
  opacity: 1;
}

/* Baseline fade-in — deliberately the lowest possible specificity (bare type
   selector) so any component's own `transition` (e.g. the hover zoom/filter
   rules on `.overlap-frame img`, `.product-card__image-wrap img`, etc., which
   already have "opacity" merged into their list) always wins the cascade and
   keeps its full transition list. This rule only ends up governing images
   that don't declare their own transition at all. */
img {
  transition: opacity 0.45s ease;
}

@media (prefers-reduced-motion: reduce) {
  img {
    transition: none;
  }
}

/* Enquiry form feedback (home + contact) */
.form-feedback {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.65;
  white-space: pre-line;
}

.form-feedback--success {
  color: #3d5c45;
}

.form-feedback--error {
  color: #7a3b3b;
}

.contact-button:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  transform: none;
}

.contact-button:disabled:hover,
.contact-button:disabled:focus-visible {
  background: inherit;
  color: inherit;
  border-color: inherit;
  transform: none;
}

/* ==============================================================
   SITE CLOSER + ONE-LINE FOOTER
   Shared end-of-page block: copy + contact list, then copyright.
   ============================================================== */
.site-closer {
  background: var(--charcoal, #1f1d1a);
  color: rgba(248, 248, 246, 0.98);
}

.site-closer__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: stretch;
}

.site-closer__copy,
.site-closer__contact {
  min-width: 0;
}

.site-closer__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 72px 48px 72px 56px;
}

.site-closer__eyebrow {
  margin: 0 0 1rem;
  font-size: 0.72rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: rgba(248, 243, 235, 0.75);
}

.site-closer__copy h2 {
  margin: 0 0 1rem;
  font-family: "Champagne Limousines", "Times New Roman", "Times", serif;
  font-size: 2.375rem;
  font-weight: 200;
  font-synthesis: none;
  line-height: 1.12;
  color: rgba(248, 248, 246, 0.98);
}

.site-closer__lede {
  margin: 0 0 2rem;
  max-width: 390px;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.75;
  color: rgba(248, 243, 235, 0.7);
}

.site-closer__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  gap: 0.6rem;
  margin: 0;
  padding: 0.88rem 1.8rem;
  border: 1px solid transparent;
  background: rgba(248, 243, 235, 0.96);
  color: var(--charcoal, #1f1d1a);
  font-family: inherit;
  font-size: 0.69rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.28s ease, color 0.28s ease,
    border-color 0.28s ease, transform 0.28s ease;
}

.site-closer__btn:hover {
  background: var(--gold, #b6a078);
  color: var(--charcoal, #1f1d1a);
  transform: translateY(-2px);
}

.site-closer__btn:focus-visible {
  background: var(--gold, #b6a078);
  color: var(--charcoal, #1f1d1a);
  outline: 2px solid rgba(248, 243, 235, 0.9);
  outline-offset: 3px;
}

.site-closer__wa {
  width: 1.1rem;
  height: 1.1rem;
  flex-shrink: 0;
}

.site-closer__contact {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  font-style: normal;
  padding: 72px 56px 72px 48px;
  border-left: 1px solid rgba(248, 243, 235, 0.13);
}

.site-closer__list {
  margin: 0;
}

.site-closer__row {
  margin: 0;
  padding: 18px 0;
  border-bottom: 1px solid rgba(248, 243, 235, 0.13);
}

.site-closer__row:first-child {
  padding-top: 0;
}

.site-closer__row:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.site-closer__row dt {
  margin: 0 0 0.4rem;
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(248, 243, 235, 0.5);
}

.site-closer__row dd {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 300;
  line-height: 1.45;
  color: rgba(248, 248, 246, 0.98);
  overflow-wrap: break-word;
}

.site-closer__row dd a {
  color: inherit;
  font: inherit;
  text-decoration: none;
}

.site-closer__row dd a:hover {
  text-decoration: underline;
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
}

.site-closer__row dd a:focus-visible {
  outline: 2px solid rgba(248, 243, 235, 0.9);
  outline-offset: 3px;
  text-decoration: underline;
  text-underline-offset: 0.22em;
}

.site-closer__hours {
  margin: 1.65rem 0 0;
  color: rgba(248, 243, 235, 0.55);
}

.site-closer__hours-label {
  margin: 0 0 0.55rem;
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.site-closer__hours p {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 300;
  line-height: 1.55;
}

.site-closer__hours-label + p {
  font-size: 0.9375rem;
}

.site-footer--line {
  background: var(--charcoal, #1f1d1a);
  color: rgba(248, 248, 246, 0.6);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding: 22px 0;
  text-align: center;
}

.site-footer--line .footer-inner {
  width: var(--container, min(1160px, calc(100vw - 6rem)));
  margin: 0 auto;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

@media (max-width: 1100px) and (min-width: 860px) {
  .site-closer__copy {
    padding: 64px 36px 64px 40px;
  }

  .site-closer__contact {
    padding: 64px 40px 64px 36px;
  }
}

@media (max-width: 859px) {
  .site-closer__grid {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .site-closer__copy {
    padding: 56px 24px 40px;
  }

  .site-closer__copy h2 {
    font-size: clamp(1.85rem, 7vw, 2.375rem);
  }

  .site-closer__contact {
    padding: 44px 24px 56px;
    border-left: none;
    border-top: 1px solid rgba(248, 243, 235, 0.13);
  }
}

@media (max-width: 420px) {
  .site-closer__btn {
    white-space: normal;
    text-align: left;
  }
}