/* =====================================================
   Ania's Table — Design Enhancements
   Warm, elegant layer over the Squarespace baseline
   ===================================================== */

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/cormorant-garamond/400-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/fonts/cormorant-garamond/300-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/cormorant-garamond/400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/cormorant-garamond/500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/cormorant-garamond/600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* --- Color Tokens --- */
:root {
  --at-cream:      #f7f3ee;
  --at-gold:       #b8955a;
  --at-gold-light: #d4b27a;
  --at-gold-glow:  rgba(184, 149, 90, 0.22);
  --at-dark:       #1a1510;
  --at-overlay:    rgba(14, 10, 6, 0.94);
  --at-footer-bg:  #171210;
}

/* --- Body & Global Warmth --- */
html,
body,
.site-wrapper,
.site-inner-wrapper {
  background-color: var(--at-cream) !important;
}

/* Squarespace uses inline contentBgColor — override every known wrapper */
.content,
.content-inner,
#content-wrapper,
.page-content-wrapper,
.sqs-layout,
.Index-page-content,
.sqs-col-12,
.sqs-row,
.span-12,
#page,
.page,
#main,
.main,
.Main,
.sqs-main-content,
[class*="page-section"],
[class*="PageSection"],
.sqs-block:not(.sqs-block-image):not(.gallery-block) {
  background-color: transparent !important;
}

/* Section-level warm tint for each index page section */
.Index-page {
  background-color: var(--at-cream) !important;
}

/* Footer — deeper warm charcoal */
#footer {
  background-color: var(--at-footer-bg) !important;
}

.footer-wrapper {
  background-color: var(--at-footer-bg) !important;
}

/* --- Typography — Classic Luxury Fonts --- */

/* Headings: Cormorant Garamond (elegant serif) */
h1, h2, h3, h4, h5, h6,
.page-title,
.site-title,
.accordion-item__title,
.sqs-html-content h1,
.sqs-html-content h2,
.sqs-html-content h3,
.sqs-html-content h4 {
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif !important;
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1.2;
}

/* Hero page title — lighter, more editorial */
.page-title {
  font-weight: 300 !important;
  letter-spacing: 0.12em !important;
}

/* Contact page intro paragraph (replaced h2 tag) */
p.at-contact-intro {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 1.3em;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.65;
  color: var(--at-dark);
  text-align: center;
  max-width: 680px;
  margin: 0 auto 2em;
  opacity: 0.82;
}

/* H2 in content areas */
.sqs-html-content h2 {
  font-weight: 400;
  font-size: 1.9em;
  color: var(--at-dark);
  padding-bottom: 0.4em;
  text-align: center;
}

/* Gold rule under H2 */
.sqs-html-content h2::after {
  content: '';
  display: block;
  width: 44px;
  height: 1px;
  background: var(--at-gold);
  margin: 0.5em auto 0;
  opacity: 0.8;
}

/* H3 service headings */
.sqs-html-content h3 {
  font-weight: 500;
  font-size: 1.25em;
  color: #2a1f14;
  font-style: italic;
  letter-spacing: 0.02em;
}

/* Body, nav, buttons: Cormorant Garamond (elegant serif throughout) */
body,
p, li, td,
.main-nav a,
.secondary-nav a,
#desktopNav a,
#mobileNav a,
.sqs-block-button-element,
.sqs-block-html p,
.sqs-html-content p,
.page-desc,
.blog-item-content,
input, textarea, select,
.accordion-item__description p,
.accordion-item__description li {
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif !important;
  font-weight: 400;
}

/* Nav links — slightly more weight for legibility */
.main-nav a,
#desktopNav a,
#mobileNav a {
  font-weight: 400 !important;
  letter-spacing: 0.11em;
}

/* Button text */
.sqs-block-button-element {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 400 !important;
  letter-spacing: 0.12em !important;
}

/* Secondary nav — footer links */
.secondary-nav .nav-wrapper {
  padding: 28px 24px !important;
}

.secondary-nav ul.cf {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 0 !important;
}

.secondary-nav li {
  display: flex;
  align-items: center;
}

/* Gold dot between footer nav items */
.secondary-nav li + li::before {
  content: '·';
  color: rgba(184, 149, 90, 0.40);
  font-size: 14px;
  line-height: 1;
  margin: 0 2px;
}

.secondary-nav a {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 9.5px !important;
  font-weight: 400 !important;
  letter-spacing: 0.20em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.42) !important;
  padding: 4px 10px !important;
  transition: color 0.25s ease !important;
  text-decoration: none !important;
  white-space: nowrap;
}

.secondary-nav a:hover {
  color: var(--at-gold-light) !important;
}

/* --- Navigation Hover — Warm Gold --- */
.main-nav a,
#desktopNav a,
#mobileNav a {
  transition: color 0.25s ease, opacity 0.25s ease;
}

.main-nav a:hover,
#desktopNav a:hover,
#mobileNav a:hover {
  color: var(--at-gold) !important;
  opacity: 1 !important;
}

/* --- Image Hover — Brightness Lift + Subtle Scale --- */
.slide img,
.sqs-image-shape-container-element,
.sqs-block-image img,
.summary-thumbnail img,
.gallery-grid-item img,
.Index-gallery-item img {
  transition: filter 0.42s ease, transform 0.48s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: filter, transform;
  cursor: zoom-in;
}

@media (hover: hover) {
  .slide:hover img,
  .sqs-block-image:hover .sqs-image-shape-container-element,
  .sqs-block-image:hover img,
  .summary-thumbnail:hover img,
  .gallery-grid-item:hover img,
  .Index-gallery-item:hover img {
    filter: brightness(1.1) saturate(1.06);
    transform: scale(1.03);
  }
}

/* Contain overflow so scale doesn't spill */
.slide,
.sqs-block-image,
.sqs-image-shape-container,
.summary-thumbnail,
.gallery-grid-item {
  overflow: hidden;
}

/* --- Buttons — Gold Glow on Hover --- */
.sqs-block-button-element {
  transition: box-shadow 0.3s ease, border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease !important;
}

@media (hover: hover) {
  .sqs-block-button-element:hover {
    box-shadow: 0 2px 24px var(--at-gold-glow), 0 0 0 1px var(--at-gold) !important;
    border-color: var(--at-gold) !important;
  }

  /* Tertiary (dark filled) buttons — warm on hover */
  .sqs-button-element--tertiary:hover {
    background-color: #2a1f14 !important;
    box-shadow: 0 4px 20px rgba(184, 149, 90, 0.25) !important;
  }
}

/* --- Scroll Animation Base State --- */
/* JS adds .at-animate; IntersectionObserver adds .at-visible */
.at-animate {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.65s ease,
              transform 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.at-animate.at-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger siblings */
.at-animate[data-delay="1"] { transition-delay: 0.12s; }
.at-animate[data-delay="2"] { transition-delay: 0.24s; }
.at-animate[data-delay="3"] { transition-delay: 0.36s; }

/* Never animate the hero/header — always visible */
#header,
.Index-page:first-child,
.Index-page--has-image:first-child,
.Header-inner,
.sqs-announcement-bar-dropzone {
  opacity: 1 !important;
  transform: none !important;
}

/* --- Instagram Footer Link --- */
#at-instagram {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 18px auto 0;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  font-family: 'proxima-nova', 'Helvetica Neue', sans-serif;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: color 0.25s ease;
}

#at-instagram:hover {
  color: var(--at-gold-light);
}

#at-instagram svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
  flex-shrink: 0;
}

/* --- Lightbox Overlay --- */
#at-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--at-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

#at-lightbox.at-lb-open {
  opacity: 1;
  visibility: visible;
}

#at-lightbox-img {
  max-width: 90vw;
  max-height: 88vh;
  object-fit: contain;
  border-radius: 2px;
  box-shadow: 0 20px 80px rgba(0, 0, 0, 0.7);
  display: block;
  transition: opacity 0.25s ease;
}

#at-lightbox-img.at-lb-loading {
  opacity: 0;
}

/* Close button */
#at-lb-close {
  position: fixed;
  top: 20px;
  right: 24px;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.75);
  font-size: 28px;
  font-weight: 200;
  line-height: 44px;
  text-align: center;
  cursor: pointer;
  transition: color 0.2s ease;
  z-index: 10000;
  font-family: 'Helvetica Neue', sans-serif;
}

#at-lb-close:hover {
  color: var(--at-gold-light);
}

/* Prev / Next arrows */
.at-lb-arrow {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  font-size: 36px;
  font-weight: 100;
  cursor: pointer;
  padding: 16px;
  transition: color 0.2s ease;
  z-index: 10000;
  user-select: none;
  font-family: 'Helvetica Neue', sans-serif;
  line-height: 1;
}

#at-lb-prev { left: 8px; }
#at-lb-next { right: 8px; }

.at-lb-arrow:hover {
  color: var(--at-gold-light);
}

/* Counter */
#at-lb-counter {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.45);
  font-size: 11px;
  letter-spacing: 0.15em;
  font-family: 'proxima-nova', 'Helvetica Neue', sans-serif;
}

/* =====================================================
   HEADER — Always readable over any hero image
   ===================================================== */

/* Dark gradient at the very top ensures nav is always legible */
.transparent-header #header,
body.gallery-design-slideshow #header {
  background: linear-gradient(
    to bottom,
    rgba(8, 5, 2, 0.64) 0%,
    rgba(8, 5, 2, 0.10) 80%,
    rgba(8, 5, 2, 0) 100%
  ) !important;
}

/* Utility: hide original location buttons once card grid is injected */
.at-loc-orig-hidden {
  display: none !important;
}

/* =====================================================
   HERO — Ken Burns + Warm Overlay + Text Entrance
   ===================================================== */

@keyframes at-kenburns {
  0%   { transform: scale(1.00) translate(0, 0); }
  50%  { transform: scale(1.08) translate(-1.2%, 0.6%); }
  100% { transform: scale(1.00) translate(0, 0); }
}

/* Ken Burns on all parallax hero images */
#parallax-images .image-container img {
  animation: at-kenburns 24s ease-in-out infinite;
  transform-origin: center center;
  will-change: transform;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

/* Warm cinematic gradient overlay — darker bottom for text legibility */
#parallax-images .image-container .image-overlay-wrapper {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: linear-gradient(
    to top,
    rgba(8, 5, 2, 0.78) 0%,
    rgba(8, 5, 2, 0.42) 45%,
    rgba(8, 5, 2, 0.10) 100%
  ) !important;
  z-index: 1;
  pointer-events: none;
}

/* Accordion — remove Squarespace blue-grey header background */
.accordion-item__click-target,
.accordion-item__title-wrapper {
  background-color: transparent !important;
}

.accordion-item__title {
  color: var(--at-dark) !important;
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 11px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  font-weight: 400 !important;
}

/* Parallax sections with no background image — override Squarespace steel-blue */
.parallax-item .title-desc-wrapper.no-main-image,
.title-desc-wrapper.over-image.no-main-image {
  background: var(--at-dark) !important;
}

/* =====================================================
   SMOOTH SECTION TRANSITIONS
   Prevent abrupt warm-dark → cream jumps in index pages
   ===================================================== */

/* Ensure Index-page sections blend smoothly */
.Index-page,
.index-section-wrapper {
  background-color: var(--at-cream) !important;
}

/* Force all section containers to cream — catches Squarespace content wrappers */
.section-background,
.content-wrapper,
[data-section-theme],
.Index-page-content {
  background-color: transparent !important;
}

/* Remove any inline background-color the Squarespace JS might inject on rows */
.sqs-row[style*="background"] {
  background-color: transparent !important;
}

/* Parallax content areas — prevent white bg leaking through on About Us etc. */
.parallax-item > .content,
.parallax-item > .content > .content-inner {
  background-color: var(--at-cream) !important;
}

/* Non-index pages: the .content sits directly over the fixed-position
   hero image (position:fixed in #parallax-images). Without an opaque
   background, the hero bleeds through making body text unreadable. */
body:not(.collection-type-index) #content-wrapper > .content,
body:not(.collection-type-index) #content-wrapper .content-inner {
  background-color: var(--at-cream) !important;
}

/* ── Mobile logo overlap — on pages with a hero title, the title begins
   at the viewport top and collides with the site-title logo (which has
   z-index 8002). Add enough top padding on mobile to clear the logo. */
@media (max-width: 767px) {
  body:not(.collection-type-index) .title-desc-inner {
    padding-top: 140px !important;
  }
}

/* ── Accessibility: hero-text contrast.
   Lighthouse reports 1.48 contrast on the hero subtitle and 2.12 on
   strong tags over the hero image. The issue is that Lighthouse samples
   the background as the average image color, which is often mid-light.
   Add a strong text-shadow so the text is legible over ANY image
   background (this also lifts the measured contrast above 4.5:1). */
.title-desc-wrapper.over-image .page-desc,
.title-desc-wrapper.over-image .page-desc p,
.title-desc-wrapper.over-image .page-desc strong,
.title-desc-wrapper.over-image .page-title {
  text-shadow:
    0 1px 4px rgba(0, 0, 0, 0.75),
    0 2px 12px rgba(0, 0, 0, 0.55) !important;
}

/* ── Accessibility: footer nav contrast.
   Current: #787674 on #171210 = 4.1:1 (just short of 4.5:1 WCAG AA).
   Lift the foreground to #aaa — yields ~7.8:1, well over threshold. */
#footer .nav-wrapper ul.cf li a span,
#footer ul.cf li.page-collection a span,
#footer ul.cf li.external-link a span {
  color: #aaa !important;
}

/* Hero text: gentle rise — slow + smooth */
@keyframes at-hero-text {
  0%   { opacity: 0; transform: translate3d(0, 10px, 0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}

.title-desc-wrapper.first .page-desc {
  animation: at-hero-text 1.8s cubic-bezier(0.16, 1, 0.3, 1) 0.65s both;
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* =====================================================
   HEADER — Scroll-based dark background
   Keeps logo & nav readable once hero is scrolled past
   ===================================================== */
#header.at-header-scrolled {
  background: rgba(18, 13, 8, 0.96) !important;
  transition: background 0.35s ease;
}

.title-desc-wrapper.first .page-desc p,
.title-desc-wrapper.first .page-desc strong {
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.75), 0 1px 6px rgba(0, 0, 0, 0.5) !important;
}

/* =====================================================
   NAVIGATION — Locations Dropdown + Elegance
   ===================================================== */

/* Refined desktop nav typography */
#desktopNav .main-nav a {
  font-size: 10px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  font-weight: 400 !important;
}

/* Locations dropdown trigger */
.at-locations-dropdown {
  position: relative;
  list-style: none;
}

.at-locations-trigger {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 10px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  font-weight: 400 !important;
}

.at-locations-trigger:hover {
  color: var(--at-gold) !important;
}

/* Small chevron arrow */
.at-locations-arrow {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  transition: transform 0.2s ease;
  flex-shrink: 0;
  margin-top: -2px;
}

.at-locations-dropdown:hover .at-locations-arrow {
  transform: rotate(-135deg) translateY(2px);
}

/* Dropdown menu */
.at-locations-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  background: var(--at-dark);
  min-width: 148px;
  padding: 10px 0;
  list-style: none;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s ease, visibility 0.22s ease, transform 0.22s ease;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.38);
  border-top: 1px solid var(--at-gold);
  z-index: 10000;
}

@media (hover: hover) {
  .at-locations-dropdown:hover .at-locations-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
  }
}

.at-locations-menu li {
  padding: 0;
}

.at-locations-menu a {
  display: block !important;
  padding: 9px 22px !important;
  font-size: 9.5px !important;
  letter-spacing: 0.16em !important;
  color: rgba(255, 255, 255, 0.62) !important;
  text-transform: uppercase !important;
  font-weight: 400 !important;
  transition: color 0.2s ease, background-color 0.2s ease !important;
  white-space: nowrap;
}

.at-locations-menu a:hover {
  color: var(--at-gold-light) !important;
  background: rgba(184, 149, 90, 0.07);
}

/* Instagram icon in desktop nav */
.at-nav-ig-item {
  line-height: 1 !important;
}

.at-nav-instagram {
  display: inline-flex !important;
  align-items: center;
  opacity: 0.60;
  transition: opacity 0.25s ease, color 0.25s ease !important;
  padding: 0 !important;
  margin-left: 2px;
}

.at-nav-instagram svg {
  width: 13px;
  height: 13px;
  fill: currentColor;
}

.at-nav-instagram:hover {
  opacity: 1 !important;
  color: var(--at-gold-light) !important;
}

/* =====================================================
   LOCATION CARDS — 2×2 elegant grid
   ===================================================== */

#at-location-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  max-width: 640px;
  margin: 24px auto 44px;
}

.at-loc-card {
  display: block;
  padding: 36px 28px 32px;
  background: var(--at-dark);
  text-decoration: none;
  text-align: center;
  position: relative;
  overflow: hidden;
  border-radius: 2px;
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.40), 0 1px 4px rgba(0, 0, 0, 0.25);
  transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.18s ease;
}

.at-loc-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid rgba(184, 149, 90, 0.0);
  border-radius: 2px;
  transition: border-color 0.3s ease;
  pointer-events: none;
}

@media (hover: hover) {
  .at-loc-card:hover {
    background: #221810;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.30);
    transform: translateY(-2px);
  }
  .at-loc-card:hover::after {
    border-color: rgba(184, 149, 90, 0.55);
  }
  .at-loc-card:hover .at-loc-card-sub {
    color: var(--at-gold-light);
    letter-spacing: 0.22em;
  }
}

.at-loc-card:active {
  transform: translateY(0);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.40);
}

.at-loc-card-name {
  display: block;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.65em;
  font-weight: 300;
  letter-spacing: 0.03em;
  line-height: 1.1;
  color: #fff;
  margin-bottom: 10px;
}

.at-loc-card-sub {
  display: block;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--at-gold);
  transition: color 0.3s ease, letter-spacing 0.3s ease;
}

@media (max-width: 600px) {
  #at-location-cards {
    grid-template-columns: 1fr;
    max-width: 300px;
    gap: 8px;
  }
}

/* =====================================================
   GALLERY — Masonry grid (replaces broken SQS slideshow)
   ===================================================== */

#at-masonry-gallery {
  columns: 3;
  column-gap: 5px;
  padding: 0;
  margin: 0;
  width: 100%;
}

.at-mg-item {
  break-inside: avoid;
  margin-bottom: 5px;
  overflow: hidden;
  cursor: zoom-in;
  position: relative;
  display: block;
}

.at-mg-item img {
  display: block;
  width: 100%;
  height: auto;
  transition: filter 0.42s ease, transform 0.48s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: filter, transform;
}

@media (hover: hover) {
  .at-mg-item:hover img {
    filter: brightness(1.1) saturate(1.06);
    transform: scale(1.04);
  }
}

@media (max-width: 767px) {
  #at-masonry-gallery { columns: 2; }
}

@media (max-width: 480px) {
  #at-masonry-gallery { columns: 1; }
}

/* --- Accessibility: respect reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  .at-animate {
    opacity: 1;
    transform: none;
    transition: none;
  }

  #parallax-images .image-container img {
    animation: none;
  }

  .title-desc-wrapper.first .page-desc {
    animation: none;
    will-change: auto;
    opacity: 1;
    transform: none;
  }

  .slide img,
  .sqs-image-shape-container-element,
  .sqs-block-image img {
    transition: filter 0.2s ease;
  }

  .slide:hover img,
  .sqs-block-image:hover img {
    transform: none;
  }
}

/* --- Mobile adjustments --- */
@media (max-width: 767px) {
  #at-lightbox-img {
    max-width: 96vw;
    max-height: 82vh;
  }

  .at-lb-arrow {
    font-size: 28px;
    padding: 10px;
  }

  #at-lb-close {
    top: 12px;
    right: 14px;
    font-size: 24px;
  }

  /* About Us — last photo: reframe to face on mobile */
  .parallax-item[data-url-id="live-to-ride"] .title-desc-image img {
    object-position: 24% 20% !important;
  }

  /* --- Typography Scaling --- */

  /* Page title */
  .page-title {
    font-size: 1.6em !important;
    letter-spacing: 0.08em !important;
  }

  /* Hero description */
  .page-desc p {
    font-size: 0.95em !important;
    line-height: 1.5 !important;
  }

  /* Content H2 (1.9em → 1.5em) */
  .sqs-html-content h2 {
    font-size: 1.5em !important;
    padding-bottom: 0.3em;
  }

  /* Content H3 */
  .sqs-html-content h3 {
    font-size: 1.15em !important;
  }

  /* Body text — bump for serif legibility */
  .sqs-html-content p,
  .sqs-block-html p,
  .accordion-item__description p {
    font-size: 15px !important;
    line-height: 1.7 !important;
  }

  /* Accordion titles (11px → 12px) */
  .accordion-item__title {
    font-size: 12px !important;
  }

  /* Contact intro */
  p.at-contact-intro {
    font-size: 1.1em !important;
    max-width: 100% !important;
    padding: 0 16px;
  }

  /* Footer nav (9.5px → 10px, stack vertically) */
  .secondary-nav a {
    font-size: 10px !important;
    padding: 6px 8px !important;
  }

  .secondary-nav ul.cf {
    flex-direction: column !important;
  }

  .secondary-nav li + li::before {
    display: none !important;
  }

  .secondary-nav .nav-wrapper {
    padding: 20px 16px !important;
  }

  /* --- Layout & Spacing --- */

  /* Location cards — reduce padding */
  .at-loc-card {
    padding: 24px 18px 22px !important;
  }

  .at-loc-card-name {
    font-size: 1.4em !important;
  }

  /* --- Hero & Animation Adjustments --- */

  /* Ken Burns — less jarring on small viewports */
  #parallax-images .image-container img {
    animation-duration: 20s;
  }

  /* Scroll animations — shorter travel distance */
  .at-animate {
    transform: translateY(14px);
  }
}

/* --- Small Phone (≤480px) --- */
@media (max-width: 480px) {
  .page-title {
    font-size: 1.35em !important;
    letter-spacing: 0.06em !important;
  }

  .sqs-html-content h2 {
    font-size: 1.3em !important;
  }

  p.at-contact-intro {
    font-size: 1em !important;
  }
}

/* --- Mobile Nav Override --- */
#mobileNav .main-nav .nav-wrapper {
  background-color: var(--at-dark) !important;
}

.mobile-nav-open {
  background-color: var(--at-dark) !important;
}

#mobileNav ul {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
}

#mobileNav ul li {
  border-bottom-color: rgba(184, 149, 90, 0.12) !important;
}

#mobileNav ul li a {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 14px !important;
  letter-spacing: 0.14em !important;
  font-weight: 400 !important;
}

/* Folder sub-items — slightly smaller, warmer */
#mobileNav ul li.folder ul li a {
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.65) !important;
}

#mobileNav ul li.folder ul li a:hover {
  color: var(--at-gold-light) !important;
}

/* --- Contact / Inquiry Form (Formspree) --- */
.at-inquiry-form {
  max-width: 640px;
  margin: 0 auto;
}

.at-form-row--names {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.at-field-wrapper {
  margin-bottom: 22px;
}

.at-field-wrapper label,
.at-field-label {
  display: block;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 0.78em;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: inherit;
  margin-bottom: 6px;
}

.at-required {
  color: var(--at-gold);
  font-style: normal;
}

.at-field-desc {
  font-size: 0.82em;
  opacity: 0.65;
  margin: 0 0 6px;
  font-style: italic;
}

.at-inquiry-form input[type="text"],
.at-inquiry-form input[type="email"],
.at-inquiry-form input[type="date"],
.at-inquiry-form textarea {
  width: 100%;
  background: transparent;
  border: 1px solid rgba(184, 149, 90, 0.5);
  border-radius: 0;
  color: inherit;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1em;
  padding: 10px 14px;
  box-sizing: border-box;
  transition: border-color 0.2s ease;
}

.at-inquiry-form input[type="text"]:focus,
.at-inquiry-form input[type="email"]:focus,
.at-inquiry-form input[type="date"]:focus,
.at-inquiry-form textarea:focus {
  outline: none;
  border-color: var(--at-gold);
}

.at-inquiry-form textarea {
  resize: vertical;
  min-height: 120px;
}

.at-checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.at-checkbox-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1em;
  color: inherit;
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
}

.at-checkbox-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--at-gold);
  cursor: pointer;
  flex-shrink: 0;
}

.at-form-submit-wrapper {
  margin-top: 28px;
}

.at-inquiry-form .sqs-block-button-element {
  width: 100%;
  padding: 14px 32px;
  cursor: pointer;
  border: 1px solid var(--at-gold);
}

@media (max-width: 600px) {
  .at-form-row--names {
    grid-template-columns: 1fr;
  }
}

/* =====================================================
   PATH C — STANDALONE STYLING (no Squarespace JS dependency)
   These rules cover visual state that Squarespace JS used to manage:
     - #content-wrapper opacity gate on index pages
     - .loading class on lazy-loaded images
     - parallax container stacking & empty-item gaps
     - homepage summary thumbnails using natural-size images
   Listed in cascade order so later rules can override if needed.
   ===================================================== */

/* Content wrapper visibility — site.css hides #content-wrapper on
   .collection-type-index pages until body.loaded is added. Our JS adds
   that class, but also force-visible as CSS fallback. */
.collection-type-index #content-wrapper,
#content-wrapper {
  opacity: 1 !important;
}

/* Image visibility — site.css has .loading { opacity:0; visibility:hidden }.
   Squarespace JS used to strip the class once the image loaded; our
   fixBrokenImages() strips it too, but this is CSS-first insurance. */
img.loading,
.sqs-image-shape-container-element.loading,
.image-container img.loading {
  opacity: 1 !important;
  visibility: visible !important;
  background-image: none !important;
}

/* Parallax container repair — Bedford template had 3 fixed-position hero
   images that the parallax JS cross-faded between on scroll. Without
   that JS, all 3 stack at the same position; keep only the .first. */
#parallax-images .image-container:not(.first) {
  display: none !important;
}

/* Empty parallax-items — items 2 and 3 (hike/ride) contain no real
   content blocks; they only existed as scroll-space for the parallax
   transitions. Collapse them so content flows directly to footer. */
.parallax-item:not(:has(.sqs-block)) {
  display: none !important;
}

/* Duplicate title-desc images — Squarespace duplicated the hero image
   inside each .parallax-item. site.css already has
   .parallax-scrolling .title-desc-image { display: none } for when the
   parallax JS was active; ensure it's always applied. */
.title-desc-image {
  display: none !important;
}

/* Banner-image hero (sub-pages like /private-chef-and-catering) —
   .banner-image is position:absolute filling #banner-wrapper, but the
   <img> inside renders at natural size (e.g. 1200×960) leaving the
   right side empty when the viewport is wider. Stretch + cover. */
.banner-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
}

/* Homepage summary/gallery thumbnails — Squarespace JS sized images
   via a "Content Fill" algorithm inside each .slide. Without it the
   img renders at natural size (e.g. 2448×3264) and overflows the
   173×173 container, showing only a top-left crop. Use object-fit. */
.sqs-gallery-block-grid .slide,
.sqs-gallery-block-slideshow .slide {
  position: relative;
}
.sqs-gallery-block-grid .slide img,
.sqs-gallery-block-grid .slide .margin-wrapper img,
.sqs-gallery-block-grid .slide .image-slide-anchor img,
.sqs-gallery-block-slideshow .slide img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
}
.sqs-gallery-block-grid .slide .margin-wrapper,
.sqs-gallery-block-grid .slide .image-slide-anchor {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* Mobile hamburger icon — site.css uses the Squarespace icon font glyph
   \e030 via .icon-menu:before. That font is loaded by site.css @font-face
   (still works), but if it ever fails, fall back to a unicode triple-bar. */
.icon-menu::before {
  content: "\2261" !important; /* unicode ≡ triple bar — universal */
  font-family: 'squarespace-ui-font', sans-serif !important;
  font-size: 28px !important;
  line-height: 32px !important;
}

/* Force mobile nav + hamburger visible. site.css has:
     #mobileNav, #mobileMenu { visibility: hidden }
     .has-nav #mobileNav, .has-nav #mobileMenu { visibility: visible }
   Squarespace JS used to add .has-nav to a parent once nav data was
   ready. Since we strip that JS, override here. Children inherit
   visibility, so we also need to force them visible. */
#mobileMenu,
#mobileNav,
#mobileNav * {
  visibility: visible !important;
}
#mobileMenu {
  color: #fff !important;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(184, 149, 90, 0.15);
}
@media (min-width: 768px) {
  /* Keep mobile menu + nav hidden on desktop — breakpoint is 767px */
  #mobileMenu,
  #mobileNav { display: none !important; }
}