/* Shared public-page fixes. Keep layouts responsive instead of hiding overflow. */
.site-footer-grid>*{min-width:0;overflow-wrap:anywhere}
@media(max-width:760px){
 .site-footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:28px!important}
 input,select,textarea{font-size:16px}
}
@media(max-width:460px){.site-footer-grid{grid-template-columns:minmax(0,1fr)!important}}
@media(max-width:360px){
 nav[aria-label="Main"]>div:first-child{padding-left:12px!important;padding-right:12px!important;gap:8px!important}
 nav[aria-label="Main"]>div:first-child>div:last-child{gap:4px!important}
 nav[aria-label="Main"]>div:first-child>a:first-child{min-width:0;flex-shrink:1!important}
 nav[aria-label="Main"]>div:first-child>a:first-child img{max-width:110px;height:auto!important}
 #hero-grid{padding-left:20px!important;padding-right:20px!important}
 #hero-grid h1{font-size:40px!important;line-height:1.06!important}
 #hero-grid p{font-size:16px!important;line-height:1.55!important}
 #hero-grid a{white-space:nowrap;padding-left:20px!important;padding-right:20px!important}
 article h1{overflow-wrap:anywhere}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}}

.art-cta>*{min-width:0}.art-cta input[type=email]{min-width:0!important;max-width:100%;width:100%;box-sizing:border-box}

/* Transparent mobile inspiration balls: no CSS halo or Safari filter box. */
body[data-mobile-homepage] #occasions img {
  filter: none !important;
  -webkit-filter: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Review quotes are set in white directly over customer photographs.
   Measured on the live homepage, the text sat at 2.7:1 mean and as low as
   1.16:1 in places, against the 4.5:1 WCAG 1.4.3 asks for at this size and
   weight. There was no scrim: the nearest painted background was the page.

   The stops are chosen against the worst case rather than against these
   particular photos. A pure white photograph has luminance 1.0, so at 86%
   coverage of rgb(14,12,10) the effective luminance is 0.144 and white text
   reads 5.4:1. Full strength is reached by 17%, and the text block starts at
   19%, so every line clears it whatever photograph is behind. */
.revtile > div:has(> .revq) {
  background: linear-gradient(to bottom,
    rgba(14, 12, 10, 0) 0%,
    rgba(14, 12, 10, .55) 10%,
    rgba(14, 12, 10, .86) 17%,
    rgba(14, 12, 10, .90) 100%);
}

/* Skip link. Off-screen until focused, then pinned to the top-left corner.
   :focus rather than :focus-visible only, because a skip link has to appear
   for anyone arriving on it by keyboard, which is the entire point of it. */
.skip-to-content {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 300;
  background: #1B5C35;
  color: #F9F6F0;
  padding: 12px 18px;
  border-radius: 0 0 10px 0;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.skip-to-content:focus { left: 0; color: #F9F6F0; }