/* ============================================================
   site.css - Lucy's Hydrostone Café.

   Every value here was measured from the live Breakdance site in Chrome at
   1440px (computed styles and boxes), and from its stylesheets for the
   breakpoints it uses: 1119, 1023, 767 and 479px. Colours and the type
   scale are Branding tokens; this file carries what tokens cannot.
   ============================================================ */

:root {
  --navy: var(--color-navy, #003147);
  --gold: var(--color-action, #B09242);
  --gold-light: var(--color-gold-light, #D4B45C);
  --gold-hover: var(--color-gold-hover, #DDBE68);
  --cream: var(--color-cream, #F6F2E6);
  --gold-line: #B0924266;
  --wrap: 1200px;
  --gutter: 32px;
  --measure: 70ch;
}
@media (max-width: 767px) { :root { --gutter: 24px; } }

/* ---------- Type ---------- */
body { color: var(--navy); font-size: 16px; line-height: 1.4; }
h1 { font-family: futura-pt-bold, futura-pt, sans-serif; font-weight: 700; }
h1, h2, h3, h4, h5, h6 { color: var(--navy); margin: 0; }
@media (max-width: 1119px) { :root { --h1-size: 42px; --h2-size: 2.8rem; } }
@media (max-width: 767px)  { :root { --h1-size: 36px; --h2-size: 2.5rem; } }
a { color: var(--gold); font-weight: 500; text-decoration: none; }
a:hover { color: var(--gold-light); }
.block-heading { max-inline-size: none; }
.block-body { margin-block-start: 0; max-inline-size: none; }
.block-body p { margin: 0; }

/* ---------- Buttons (measured: 12px 24px, 1px #D4B45C, 2px radius, 16px/500) ---------- */
.cta--primary,
.cms-form button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, var(--gold-light) 0%, var(--gold-light) 100%);
  border: 1px solid var(--gold-light);
  color: var(--navy);
  border-radius: 2px;
  padding: 12px 24px;
  font: 500 16px/16px futura-pt, sans-serif;
  text-decoration: none;
  cursor: pointer;
}
.cta--primary:hover,
.cms-form button:hover {
  background: linear-gradient(180deg, var(--gold-hover) 0%, var(--gold-light) 100%);
  color: var(--navy);
}

/* Lucy's sections set their own spacing, so the engine's block padding is off. */
[class*="lucys-"] > .block,
.lucys-visit-details > .block { padding-block: 0; }

/* ---------- Header (135px: 16px padding, 120px logo, 20px link padding) ---------- */
.site-header.site-header--blocks {
  position: relative;
  inline-size: 100%;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  background: var(--navy);
  padding: 16px max(var(--gutter), (100% - var(--wrap)) / 2);
  z-index: 20;
}
.site-header--blocks .block { padding: 0; }
.lucys-header-logo .logo-block img { inline-size: 120px; block-size: auto; display: block; }
.lucys-header-menu { justify-self: center; }
.lucys-header-menu .menu-list { gap: 0; margin: 0; padding: 0; list-style: none; }
.lucys-header-menu .menu-item a {
  display: block;
  padding: 20px;
  color: #FFFFFF;
  font: 500 16px/16px futura-pt, sans-serif;
}
.lucys-header-menu .menu-item a:hover { color: var(--gold-light); }
.lucys-header-cta { justify-self: end; }
.lucys-header-cta > * { display: flex; justify-content: flex-end; inline-size: auto; }
/* The header's button is the outlined one: white on a gold tint. */
.lucys-header-cta .cta--primary {
  background: rgba(176, 146, 66, .12);
  border: 1px solid var(--gold);
  border-radius: 3px;
  color: #FFFFFF;
}
.lucys-header-cta .cta--primary:hover { background: var(--gold); color: #FFFFFF; }
@media (max-width: 1119px) {
  .site-header.site-header--blocks { padding-block: 12px; }
}
@media (max-width: 800px) {
  .site-header.site-header--blocks { grid-template-columns: 1fr auto auto; }
  .lucys-header-menu { order: 3; justify-self: end; }
  .lucys-header-cta { order: 2; }
  .lucys-header-menu .menu-toggle { align-items: stretch; inline-size: 32px; block-size: 32px; gap: 6px; }
  .lucys-header-menu .menu-toggle span { background: #FFFFFF; inline-size: 32px; block-size: 3px; border-radius: 2px; }
  .lucys-header-menu > .menu-list {
    position: absolute;
    inset-inline: 0;
    inset-block-start: 100%;
    background: #FFFFFF;
    padding: 0;
    gap: 0;
    box-shadow: 0 12px 20px #0000001C;
  }
  .lucys-header-menu .menu-item a { color: var(--navy); padding: 16px var(--gutter); border-block-start: 1px solid #0000001A; }
  .lucys-header-menu .menu-item a:hover { color: var(--gold); }
}
@media (max-width: 479px) {
  .lucys-header-cta { display: none; }
  .site-header.site-header--blocks { grid-template-columns: 1fr auto; padding-inline: 24px; }
}

/* ---------- Hero (550px band; h1 500px wide, text 580px; cat at 10%) ---------- */
.lucys-hero { background: var(--navy); overflow-x: clip; }
.lucys-hero .block--hero {
  padding: 0;
  /* The photo runs edge to edge and straddles the band: its lower 51.79% sits on white. */
  --hero-img-h: calc(min(var(--wrap), 100vw - (var(--gutter) * 2)) * .6469);
  background: linear-gradient(0deg, #FFFFFF calc(var(--hero-img-h) * .5179), var(--navy) calc(var(--hero-img-h) * .5179));
}
.lucys-hero .hero-inner {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
  padding-block: 96px 128px;
}
.lucys-hero .hero-inner::before {
  content: "";
  position: absolute;
  inset: 0 calc(50% - 50vw);
  z-index: -1;
  background: url("/uploads/lucys-cat-icon.png") center / contain no-repeat;
  opacity: .1;
}
.lucys-hero h1 { color: #FFFFFF; inline-size: min(500px, 100%); margin: 0 auto; }
.lucys-hero .block-body { color: #FFFFFF; inline-size: min(580px, 100%); margin: 0 auto; }
.lucys-hero .hero-actions { margin: 12px 0 0; justify-content: center; }
/* At rest the photo sits in the 1200px column, the navy/white split showing at its sides;
   below 1120px it runs edge to edge at a fixed height, as on the old site. */
.lucys-hero .block--hero > .hero-media { display: block; position: relative; z-index: 1; }
.lucys-hero .hero-media img {
  display: block;
  inline-size: 100%;
  block-size: var(--hero-img-h);
  object-fit: cover;
  object-position: 50% 7%;
  border-radius: 0;
}
@media (max-width: 1119px) {
  .lucys-hero .block--hero { --hero-img-h: 500px; }
  .lucys-hero .block--hero > .hero-media { inline-size: 100%; }
}
@media (max-width: 479px) {
  .lucys-hero .block--hero { --hero-img-h: 460px; }
  .lucys-hero .hero-inner { padding-block: 64px; }
}

/* ---------- Our Story: photos at 0 and +50px, tape at +105px, card at +133px ---------- */
.lucys-story {
  position: relative;
  display: grid;
  padding-block: 122px 124px;
  overflow-x: clip;
}
.lucys-story > .block { grid-area: 1 / 1; }
.lucys-story-photos .gallery-grid {
  position: relative;
  display: block;
  block-size: 700px;
  margin: 0 auto;
  inline-size: min(var(--wrap), 100%);
}
.lucys-story-photos .gallery-item { position: absolute; margin: 0; }
.lucys-story-photos .gallery-item img { display: block; block-size: 100%; inline-size: 100%; object-fit: cover; border-radius: 0; }
.lucys-story-photos .gallery-item:nth-child(1) { inset-block-start: 0;    inset-inline-start: 100px; inline-size: 500px; block-size: 700px; }
.lucys-story-photos .gallery-item:nth-child(2) { inset-block-start: 50px; inset-inline-start: 600px; inline-size: 500px; block-size: 600px; }
.lucys-story-photos .gallery-grid::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset-block-start: 105px;
  inset-inline-start: 500px;
  inline-size: 200px;
  aspect-ratio: 400 / 115;
  background: url("/uploads/lucys-paper-tape.png") center / contain no-repeat;
  rotate: 172deg;
}
/* The paper card: 550px, 52px padding, 24px gap, cream with the paper texture at 40%. */
.lucys-story-card {
  --card-w: min(550px, 100% - 2 * var(--gutter));
  z-index: 1;
  align-self: start;
  margin-block-start: 133px;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 52px 0 !important;
  text-align: center;
}
.lucys-story-card::before,
.lucys-story-card::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 50%;
  inline-size: var(--card-w);
  translate: -50% 0;
  z-index: -1;
}
.lucys-story-card::before { background: var(--cream); box-shadow: 4px 12px 20px 0 #0000001C; }
.lucys-story-card::after { background: url("/uploads/lucys-paper-texture.jpg") center / cover no-repeat; opacity: .4; }
.lucys-story-card > .block-heading,
.lucys-story-card > .block-body { inline-size: calc(var(--card-w) - 104px); margin: 0; color: var(--navy); }
@media (max-width: 1119px) {
  .lucys-story-photos .gallery-grid { block-size: 600px; }
  .lucys-story-photos .gallery-item:nth-child(1) { inline-size: 400px; block-size: 600px; }
  .lucys-story-photos .gallery-item:nth-child(2) { inline-size: 400px; block-size: 500px; inset-inline-start: 500px; }
  .lucys-story-photos .gallery-grid::after { inset-inline-start: 400px; }
}
@media (max-width: 1023px) {
  .lucys-story { padding-block: 96px; }
  .lucys-story-photos .gallery-grid { inline-size: calc(100% - 64px); }
  .lucys-story-photos .gallery-item:nth-child(1) { inset-inline-start: 36px; }
  .lucys-story-photos .gallery-item:nth-child(2) { inset-inline-start: 300px; }
  .lucys-story-photos .gallery-grid::after { inset-inline-start: 286px; inset-block-start: 77px; }
  .lucys-story-card { --card-w: min(500px, 100% - 2 * var(--gutter)); }
}
@media (max-width: 767px) {
  .lucys-story-photos .gallery-grid { block-size: 700px; inline-size: calc(100% - 48px); }
  .lucys-story-photos .gallery-item:nth-child(1) { inset-inline-start: 8px; block-size: 700px; inline-size: min(400px, 70%); }
  .lucys-story-photos .gallery-item:nth-child(2) { inset-inline-start: auto; inset-inline-end: 11px; block-size: 570px; inline-size: min(400px, 60%); }
  .lucys-story-photos .gallery-grid::after { inset-inline-start: 30%; }
}
@media (max-width: 479px) {
  .lucys-story { padding-block: 52px; }
  .lucys-story-photos .gallery-grid { block-size: 450px; }
  .lucys-story-photos .gallery-item:nth-child(1) { inset-block-start: 8px; inline-size: min(350px, 85%); block-size: 450px; }
  .lucys-story-photos .gallery-item:nth-child(2) { inset-block-start: auto; inset-block-end: 6px; inline-size: min(250px, 60%); block-size: 350px; inset-inline-end: 8px; }
  .lucys-story-photos .gallery-grid::after { inset-block-start: 24px; inset-inline-start: 101px; }
  .lucys-story-card { margin-block-start: 90px; gap: 12px; padding: 32px 0 !important; }
  .lucys-story-card > .block-heading,
  .lucys-story-card > .block-body { inline-size: calc(var(--card-w) - 64px); }
}

/* ---------- Our Menu: cream, coffee flower (500px, top right, 10%), 800px column ---------- */
.lucys-menu-teaser,
.lucys-menu-page,
.lucys-menu-category { background: var(--cream); position: relative; }
.lucys-menu-teaser { padding-block: 112px; overflow: hidden; }
.lucys-menu-page { padding-block: 112px 0; overflow: hidden; }
.lucys-menu-teaser::before,
.lucys-menu-page::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/uploads/lucys-coffee-flower-large.png") right top / 500px auto no-repeat;
  opacity: .1;
  pointer-events: none;
}
.lucys-menu-teaser > .block > *,
.lucys-menu-page > .block > *,
.lucys-menu-category > .block > * { --block-column: min(100% - (var(--gutter) * 2), 800px); }
.lucys-menu-tabs .block-heading,
.lucys-menu-tabs h1 {
  color: var(--navy);
  text-align: center;
  font-family: futura-pt, sans-serif;
  font-size: var(--h2-size, 3.15rem);
  font-weight: 600;
  line-height: 1.2;
}
.lucys-menu-tabs .block-body { margin-block-start: 24px; }
/* Tabs: 16px/600 titles, 16px 8px padding, 24px apart, gold with a 2px rule when open. */
.lucys-menu-tabs ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
}
.lucys-menu-tabs li { margin: 0; }
.lucys-menu-tabs li a {
  position: relative;
  display: block;
  padding: 16px 8px;
  color: var(--navy);
  font: 600 16px/18.4px futura-pt, sans-serif;
}
.lucys-menu-tabs li a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 2px;
  background: transparent;
}
.lucys-menu-tabs li a:hover { color: var(--gold); }
.lucys-menu-tabs li a:hover::after { background: var(--gold); }
.lucys-menu-teaser .lucys-menu-tabs li:first-child a { color: var(--gold); }
.lucys-menu-teaser .lucys-menu-tabs li:first-child a::after { background: var(--gold); }
.lucys-menu-teaser .lucys-menu-list { margin-block-start: 17px; }

/* The lists, as the old tab panels: 20px padding, two 354px columns 52px apart,
   left-aligned, 20.8px/500 sub-headings, items 8px apart. */
.lucys-menu-list .price-list { margin-block: 0; padding: 20px; gap: 0; text-align: start; }
.lucys-menu-list .price-list-group { gap: 0; }
.lucys-menu-list .price-list-group .price-list-group { margin: 0; display: flex; flex-direction: column; }
.lucys-menu-list h3.price-list-group-title {
  grid-column: 1 / -1;
  font-size: var(--h3-size, 2.25rem);
  font-weight: 500;
  color: var(--navy);
  text-align: center;
  padding-block-end: 16px;
}
.lucys-menu-list--teaser h3.price-list-group-title { display: none; }
.lucys-menu-list h4.price-list-group-title { color: var(--navy); font-size: 1.3rem; font-weight: 500; line-height: 1.2; margin: 16px 0 8px; }
.lucys-menu-list .price-list-group > .price-list-group:first-of-type > h4,
.lucys-menu-list--teaser .price-list-group--coffee-based > h4,
.lucys-menu-list--teaser .price-list-group--teas > h4,
.lucys-menu-list .price-list-group--teas > h4,
.lucys-menu-list .price-list-group--specialty-bread > h4 { margin-block-start: 0; }
.lucys-menu-list .price-list-items { display: block; margin: 0; padding: 0; list-style: none; }
.lucys-menu-list .price-list-item { display: block; margin: 0 0 8px; break-inside: avoid; }
.lucys-menu-list .price-list-item-name { font-weight: 400; }
.lucys-menu-list .price-list-group-desc { color: var(--navy); font-size: 16px; font-style: italic; margin: 0 0 8px; order: 9; }
.lucys-menu-list .price-list-group-desc::before { content: "*"; }
.lucys-menu-list .price-list > .price-list-group:has(> .price-list-group) {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 52px;
  align-items: start;
}
/* Coffee fills its first column top to bottom, as the old tab did. */
.lucys-menu-list .price-list > .price-list-group--coffee {
  grid-template-rows: auto auto auto auto;
  grid-auto-flow: column;
}
.lucys-menu-list .price-list > .price-list-group--coffee > h3 { grid-row: 1; }
/* On home the Coffee heading is hidden (the open tab names it), so one row fewer. */
.lucys-menu-list--teaser .price-list > .price-list-group--coffee { grid-template-rows: auto auto auto; }
.lucys-menu-list .price-list > .price-list-group:not(:has(> .price-list-group)) > .price-list-items {
  columns: 2;
  column-gap: 52px;
}
/* The menu page: the five categories in turn, a gold rule between them. */
.lucys-menu-category { padding-block: 24px; }
.lucys-menu-category + .lucys-menu-category > .block::before {
  content: "";
  display: block;
  inline-size: min(100% - (var(--gutter) * 2), 800px);
  margin: 0 auto 24px;
  border-block-start: 1px solid var(--gold-line);
}
.lucys-menu-category:last-child { padding-block-end: 112px; }
@media (max-width: 1023px) {
  .lucys-menu-teaser, .lucys-menu-page { padding-block-start: 96px; }
  .lucys-menu-teaser { padding-block-end: 96px; }
}
@media (max-width: 767px) {
  /* One row of tabs that scrolls sideways, as the old site did on phones. */
  .lucys-menu-tabs ul { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
  .lucys-menu-tabs li { flex: 0 0 auto; }
  .lucys-menu-list .price-list > .price-list-group:has(> .price-list-group) { grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: none; }
  .lucys-menu-list .price-list > .price-list-group > .price-list-items { columns: 1; }
  .lucys-menu-list .price-list-group > .price-list-group > h4 { margin-block-start: 16px !important; }
}
@media (max-width: 479px) {
  .lucys-menu-teaser, .lucys-menu-page { padding-block-start: 64px; }
  .lucys-menu-teaser { padding-block-end: 64px; }
  .lucys-menu-list .price-list { padding: 0; }
}

/* ---------- Menu Features: cream to white, staggered 2-column photos ---------- */
.lucys-features {
  background: linear-gradient(0deg, #FFFFFF 0%, var(--cream) 100%);
  padding-block: 120px;
}
.lucys-features .block-heading { text-align: center; margin: 0 auto 12px; }
/* Natural shapes, as on the old site: the wide photo over the square in the
   left column, the square over the wide one in the right. */
.lucys-features .gallery-grid {
  --g: 32px;
  --col: calc((min(100vw - var(--gutter) * 2, var(--wrap)) - var(--g)) / 2);
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: calc(var(--col) * .5616) calc(var(--col) * .4384 - var(--g)) calc(var(--col) * .5616);
  gap: var(--g);
  margin-block-start: 32px;
}
.lucys-features .gallery-item { margin: 0; background: #00000030; overflow: hidden; }
.lucys-features .gallery-item:nth-child(1) { grid-column: 1; grid-row: 1; }
.lucys-features .gallery-item:nth-child(2) { grid-column: 2; grid-row: 1 / span 2; }
.lucys-features .gallery-item:nth-child(3) { grid-column: 1; grid-row: 2 / span 2; }
.lucys-features .gallery-item:nth-child(4) { grid-column: 2; grid-row: 3; }
.lucys-features .gallery-item img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; border-radius: 0; }
@media (max-width: 1119px) { .lucys-features .gallery-grid { --g: 10px; } }
@media (max-width: 1023px) { .lucys-features { padding-block: 96px; } }
@media (max-width: 479px) {
  .lucys-features { padding-block: 64px; }
  .lucys-features .gallery-grid { grid-template-columns: 1fr; grid-template-rows: none; }
  .lucys-features .gallery-item:nth-child(n) { grid-column: 1; grid-row: auto; }
}

/* ---------- Reviews: navy, flowers, white heading, white bubble cards ---------- */
.lucys-reviews { background: var(--navy); padding-block: 120px; }
.lucys-reviews-intro > * { text-align: start; }
.lucys-reviews-intro .block-heading,
.lucys-reviews-intro .block-body { padding-inline-end: 128px; }
.lucys-reviews-intro .block-heading { color: #FFFFFF; margin-block-end: 8px; }
.lucys-reviews-intro .block-heading::before {
  content: "";
  display: block;
  block-size: 37px;
  inline-size: 228px;
  margin-block-end: 16px;
  background:
    url("/uploads/lucys-coffee-flower.png") 0 0 / 36px auto no-repeat,
    url("/uploads/lucys-coffee-flower.png") 48px 0 / 36px auto no-repeat,
    url("/uploads/lucys-coffee-flower.png") 96px 0 / 36px auto no-repeat,
    url("/uploads/lucys-coffee-flower.png") 144px 0 / 36px auto no-repeat,
    url("/uploads/lucys-coffee-flower.png") 192px 0 / 36px auto no-repeat;
}
.lucys-reviews-intro .block-body { color: #FFFFFF; margin-block-start: 16px; }
.lucys-reviews-intro .block-body p { max-inline-size: 587px; }
.lucys-reviews .block--reviews { padding-block-start: 16px; }
.lucys-reviews .reviews-summary,
.lucys-reviews .reviews-source,
.lucys-reviews .reviews-source a { color: #FFFFFF; }
.lucys-reviews .reviews-list {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px 30px;
}
.lucys-reviews .review {
  display: grid;
  grid-template-columns: 60px 1fr;
  column-gap: 20px;
  align-items: center;
  align-content: start;
  margin: 0 0 30px;
}
.lucys-reviews .review-stars,
.lucys-reviews .review-text { grid-column: 1 / -1; background: #FFFFFF; margin: 0; padding-inline: 30px; }
.lucys-reviews .review-stars { grid-row: 1; padding-block: 30px 8px; color: #F7B80C; letter-spacing: .1em; border-radius: 8px 8px 0 0; }
.lucys-reviews .review-text {
  grid-row: 2;
  position: relative;
  padding-block-end: 30px;
  margin-block-end: 25px;
  border-radius: 0 0 8px 8px;
  color: var(--navy);
  font-size: 16px;
}
.lucys-reviews .review-text::after {
  content: "";
  position: absolute;
  inset-block-end: -20px;
  inset-inline-start: 60px;
  border-inline-end: 20px solid transparent;
  border-block-start: 20px solid #FFFFFF;
}
.lucys-reviews .review-initial {
  grid-row: 3;
  grid-column: 1;
  inline-size: 60px;
  block-size: 60px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--gold);
  color: var(--navy);
  font-weight: 500;
  font-size: 24px;
  margin-inline-start: 30px;
}
.lucys-reviews .review-author { grid-row: 3; grid-column: 2; margin: 0 0 0 30px; color: #FFFFFF; font-weight: 700; font-size: 16px; }
.lucys-reviews .review-date { display: none; }
@media (max-width: 1023px) {
  .lucys-reviews { padding-block: 96px; }
  .lucys-reviews .reviews-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) { .lucys-reviews .reviews-list { grid-template-columns: 1fr; } }
@media (max-width: 479px) {
  .lucys-reviews { padding-block: 64px; }
  .lucys-reviews-intro .block-heading,
  .lucys-reviews-intro .block-body { padding-inline-end: 0; }
}

/* ---------- Visit Us: 112px band, two 536px columns 128px apart ---------- */
.sw-section.lucys-visit {
  --section-gap: 128px;
  grid-template-columns: 1fr 1fr;
  padding-block: 112px;
  align-items: start;
}
.lucys-visit .sw-section[data-sw-layout="one"] > * + * { margin-block-start: 0; }
.lucys-visit-map .map-block { gap: 0; }
.lucys-visit-map .map-block__map { block-size: 580px; }
/* Until Google confirms the domain the map draws nothing and its list is the
   whole block, so the list is a cream card the size of the map. */
.lucys-visit-map .map-block__map[hidden] + .map-block__list {
  position: relative;
  isolation: isolate;
  min-block-size: 580px;
  display: grid;
  place-items: center;
  text-align: center;
  background: var(--cream);
  overflow: hidden;
}
.lucys-visit-map .map-block__map[hidden] + .map-block__list::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("/uploads/lucys-coffee-flower-large.png") right top / 340px auto no-repeat;
  opacity: .1;
}
.lucys-visit-map .map-block__list { list-style: none; margin: 0; padding: 32px; }
.lucys-visit-map .map-place__name { font-size: 1.3rem; font-weight: 500; margin-block-end: 8px; }
.lucys-visit-map .map-place__address { font-style: normal; margin-block-end: 16px; }
.lucys-visit-map .map-place__links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; }
.lucys-visit-info .block-heading { color: var(--navy); margin-block-end: 32px; }
.lucys-visit-info .block-body { display: flex; flex-direction: column; gap: 16px; margin-block-end: 52px; }
.lucys-visit-info .block-body p { display: flex; align-items: flex-start; gap: 12px; }
.lucys-visit-info .block-body p::before {
  content: "";
  flex: 0 0 19px;
  block-size: 19px;
  margin-block-start: 1px;
  background: var(--navy);
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}
.lucys-visit-info .block-body p:nth-child(1) { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.1 2 5 5.1 5 9c0 5.2 7 13 7 13s7-7.8 7-13c0-3.9-3.1-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E"); }
.lucys-visit-info .block-body p:nth-child(2) { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E"); }
.lucys-visit-info .block-body p:nth-child(3) { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25c1.1.37 2.3.57 3.6.57a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1C10.6 21 3 13.4 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E"); }
.lucys-visit-info .block-body a { color: var(--gold); font-weight: 500; }
/* Form: 12px between fields, 16px/500 labels, 12px 16px inputs on #D2D2D2. */
.lucys-visit-form .cms-form { gap: 12px; max-inline-size: none; margin: 0; }
.lucys-visit-form .cms-form .field { gap: 4px; }
.lucys-visit-form .cms-form .field > span { color: var(--navy); font: 500 16px/16px futura-pt, sans-serif; }
.lucys-visit-form .cms-form .field-required { color: #B91C1C; padding-inline-start: 4px; }
.lucys-visit-form .cms-form input,
.lucys-visit-form .cms-form textarea {
  background: #FFFFFF;
  border: 1px solid #D2D2D2;
  border-radius: 3px;
  color: #000000;
  font: 400 16px/16px futura-pt, sans-serif;
  padding: 12px 16px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.lucys-visit-form .cms-form textarea { block-size: 100px; min-block-size: 100px; line-height: 1.4; }
.lucys-visit-form .cms-form input:focus,
.lucys-visit-form .cms-form textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 12px 0 #3B82F666;
}
@media (max-width: 1119px) { .sw-section.lucys-visit { --section-gap: 64px; } }
@media (max-width: 1023px) {
  .sw-section.lucys-visit { --section-gap: 52px; padding-block: 96px; }
  .lucys-visit-form .cms-form button { justify-self: stretch; }
}
@media (max-width: 767px) { .sw-section.lucys-visit { grid-template-columns: 1fr; } }
@media (max-width: 479px) {
  .lucys-visit-map .map-block__map { block-size: 364px; }
  .lucys-visit-map .map-block__map[hidden] + .map-block__list { min-block-size: 364px; }
}

/* ---------- Footer: 156px logo, 14px links, gold rule, 14px/300 legal line ---------- */
.site-footer { margin-block-start: 0; border: 0; background: #FFFFFF; }
.site-footer--blocks .footer-blocks { padding: 0; border: 0; }
.lucys-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  text-align: center;
}
.lucys-footer > .block { padding: 0; }
.lucys-footer > .block > * { inline-size: auto; }
.lucys-footer-logo .logo-block img { inline-size: 156px; block-size: auto; display: block; margin: 0 auto; }
.lucys-footer-menu .menu-list {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 40px;
}
.lucys-footer-menu .menu-item a { display: block; color: var(--navy); font: 500 14px/14px futura-pt, sans-serif; }
.lucys-footer-menu .menu-item a:hover { color: var(--gold); }
.lower-footer { border-block-start: 0; color: var(--navy); font: 300 14px/1.4 futura-pt, sans-serif; margin-block-start: 24px; }
.lower-footer-inner {
  inline-size: min(100% - (var(--gutter) * 2), var(--wrap));
  border-block-start: 1px solid var(--gold-line);
  padding-block: 24px 32px;
}
.lower-footer a { color: inherit; font-weight: 300; }
@media (max-width: 1023px) {
  .lucys-footer-logo .logo-block img { inline-size: 120px; }
  .lucys-footer-menu .menu-list { margin-block-end: 0; }
}
@media (max-width: 767px) {
  .lower-footer-inner { flex-direction: column; align-items: center; text-align: center; gap: 4px; }
}

/* ---------- Menu Features: View Menu under the photos ---------- */
.lucys-features > .block { display: flex; flex-direction: column; align-items: center; }
.lucys-features > .block > .block-cta { order: 2; inline-size: auto; margin: 32px auto 0; }
.lucys-features > .block > .gallery-grid { order: 1; }

/* ---------- Entrance animations and parallax, as on the old site ----------
   Taken from its Breakdance settings: heading fade 450ms after 200ms, text
   fade 650ms after 300ms, button slide up 100px 650ms after 500ms, tape zoom
   from 1.2 over 500ms after 400ms, story card slide up 100px over 650ms, all
   eased power1.out. The hero photo starts at 2.4x and 380px down and settles
   over the first 28% (scale) and 32% (position) of its pass through the
   window. The hero plays on load; the rest is tied to scrolling with CSS
   scroll-driven animations, so there is no script, and a browser without
   them (or a visitor who asks for reduced motion) gets the page as it rests. */
@media (prefers-reduced-motion: no-preference) {
  :root { --lucys-ease: cubic-bezier(.5, 1, .89, 1); }
  @keyframes lucys-fade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes lucys-slide-up { from { visibility: visible; translate: 0 100px; } to { visibility: visible; translate: 0 0; } }
  .lucys-hero h1 { animation: lucys-fade 450ms var(--lucys-ease) 200ms both; }
  .lucys-hero .block-body { animation: lucys-fade 650ms var(--lucys-ease) 300ms both; }
  .lucys-hero .hero-actions { visibility: hidden; animation: lucys-slide-up 650ms var(--lucys-ease) 500ms forwards; }

  @supports (animation-timeline: view()) {
    @keyframes lucys-parallax-scale { from { scale: 2.4; } to { scale: 1; } }
    @keyframes lucys-parallax-y { from { translate: 0 380px; } to { translate: 0 0; } }
    @keyframes lucys-zoom-out { from { scale: 1.2; } to { scale: 1; } }
    @keyframes lucys-rise { from { translate: 0 100px; } to { translate: 0 0; } }
    .lucys-hero .hero-media { view-timeline: --lucys-hero-photo block; }
    .lucys-hero .hero-media img {
      animation: lucys-parallax-scale linear both, lucys-parallax-y linear both;
      animation-timeline: --lucys-hero-photo, --lucys-hero-photo;
      animation-range: cover 0% cover 28%, cover 0% cover 32%;
    }
    .lucys-story-photos .gallery-grid::after {
      animation: lucys-zoom-out var(--lucys-ease) both;
      animation-timeline: view();
      animation-range: entry 10% entry 60%;
    }
    .lucys-story-card {
      animation: lucys-rise var(--lucys-ease) both;
      animation-timeline: view();
      animation-range: entry 0% entry 45%;
    }
  }
}