/* ============================================================
   BEANLEAF — SECTIONS
   Nav · Marquee · Experience · Perk · Pour · Occasions ·
   How · Gallery · Menu · Custom · About · FAQ ·
   Inquire shell · Footer · Lightbox
   Builds on css/base.css. Every value comes from tokens.css.
   ============================================================ */


/* ============================================================
   1. NAV
   ============================================================ */

.nav {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 90;
  block-size: 76px;
  background: transparent;
  border-block-end: 1px solid transparent;
  transition:
    block-size var(--t-mid) var(--ease),
    background-color var(--t-mid) var(--ease),
    border-color var(--t-mid) var(--ease),
    box-shadow var(--t-mid) var(--ease);
}

.nav-inner {
  block-size: 100%;
  inline-size: 100%;
  max-inline-size: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(.75rem, 2.4vw, 2rem);
}

/* ---- Scrolled state (class set by js/main.js) --------------- */

.nav.is-scrolled {
  block-size: 66px;
  background: var(--paper);
  background: color-mix(in srgb, var(--paper) 78%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  border-block-end-color: var(--line);
  box-shadow: var(--sh-1);
}

/* ---- Brand -------------------------------------------------- */

.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  flex: none;
  color: var(--ink);
}

.nav-mark {
  inline-size: clamp(30px, 3.4vw, 38px);
  block-size: auto;
  object-fit: contain;
  transition: transform var(--t-mid) var(--ease);
}

.nav-word {
  inline-size: clamp(100px, 10vw, 120px);
  block-size: auto;
  object-fit: contain;
}

/* ---- Desktop links ------------------------------------------ */

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.1vw, 2.05rem);
  margin-inline: auto;
}

.nav-links a {
  position: relative;
  display: inline-block;
  padding-block: .45rem;
  font-size: var(--fs-eyebrow);
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease);
}

.nav-links a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 1px;
  background: var(--olive);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--t-mid) var(--ease);
}

.nav-links a.is-active,
.nav-links li.is-active > a { color: var(--olive); }

.nav-links a.is-active::after,
.nav-links li.is-active > a::after { transform: scaleX(1); }

/* ---- Actions ------------------------------------------------ */

.nav-actions {
  display: flex;
  align-items: center;
  gap: .65rem;
  flex: none;
}

.nav-cta { flex: none; }

/* ---- Burger (two-line mark that morphs to an X) ------------- */

.nav-burger {
  display: none;
  inline-size: 44px;
  block-size: 44px;
  flex: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: var(--r-pill);
}

.nav-burger span {
  inline-size: 22px;
  block-size: 1px;
  background: var(--ink);
  transition: transform var(--t-mid) var(--ease);
}

.nav-burger[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:last-child  { transform: translateY(-4px) rotate(-45deg); }

/* ---- Slide-down panel --------------------------------------- */

.nav-panel {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 100%;
  display: grid;
  align-content: start;
  gap: 0;
  padding-block: clamp(1rem, 3.5vw, 1.6rem) clamp(1.6rem, 5vw, 2.4rem);
  padding-inline: var(--gutter);
  max-block-size: calc(100vh - 76px);
  max-block-size: calc(100dvh - 76px);
  overflow-y: auto;
  background: var(--paper);
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  border-block-end: 1px solid var(--line);
  box-shadow: var(--sh-2);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-14px);
  transition:
    opacity var(--t-mid) var(--ease),
    transform var(--t-mid) var(--ease),
    visibility 0s linear var(--t-mid);
}

/* Genuinely gone when JS sets the attribute */
.nav-panel[hidden] { display: none; }

.nav-panel.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition:
    opacity var(--t-mid) var(--ease),
    transform var(--t-mid) var(--ease),
    visibility 0s;
}

.nav-panel > a {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(1.15rem, 4vw, 1.5rem);
  line-height: 1.25;
  color: var(--ink);
  padding-block: .55rem;
  border-block-end: 1px solid var(--line-soft);
  transition: color var(--t-fast) var(--ease), padding-inline-start var(--t-mid) var(--ease);
}

.nav-panel > .nav-panel-cta {
  justify-self: start;
  margin-block-start: clamp(1rem, 3vw, 1.5rem);
  border-block-end: 0;
  font-family: var(--sans);
  font-size: var(--fs-eyebrow);
  padding-block: 1.05em;
}

@media (hover: hover) {
  .nav-brand:hover .nav-mark { transform: rotate(-6deg) scale(1.04); }
  .nav-links a:hover { color: var(--olive); }
  .nav-links a:hover::after { transform: scaleX(1); }
  .nav-panel > a:not(.nav-panel-cta):hover { color: var(--olive); padding-inline-start: .5rem; }
}

/* The full link row plus the CTA needs ~1060px before the button starts
   overflowing the right edge; 1080 is the same step .pour-grid uses. */
@media (max-width: 1079px) {
  .nav-links { display: none; }
  .nav-burger { display: flex; }
}

@media (min-width: 1080px) {
  .nav-panel { display: none; }
}

@media (max-width: 619px) {
  .nav-cta { display: none; }
}


/* ============================================================
   2. STRIP / MARQUEE
   ============================================================ */

.strip {
  padding-block: clamp(1.5rem, 3vw, 2.35rem);
  border-block: 1px solid var(--line-soft);
  overflow: hidden;
}

.marquee {
  display: flex;
  inline-size: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}

.marquee-track {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: clamp(1rem, 2vw, 1.9rem);
  padding-inline-end: clamp(1rem, 2vw, 1.9rem);
  white-space: nowrap;
  animation: bl-marquee 42s linear infinite;
  will-change: transform;
}

/* If js/main.js doubles the content inside a single track instead of
   cloning the track, half the travel is exactly one full copy. */
.marquee-track:only-child { animation-name: bl-marquee-half; }

.marquee-track span {
  font-size: clamp(.72rem, 1vw, .875rem);
  font-weight: 300;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.marquee-track i {
  font-style: normal;
  color: var(--tea);
  font-size: .875rem;
}

@keyframes bl-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-100%, 0, 0); }
}
@keyframes bl-marquee-half {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

@media (hover: hover) {
  .marquee:hover .marquee-track { animation-play-state: paused; }
}


/* ============================================================
   3. #experience — WHAT IT IS
   ============================================================ */

.what {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .8fr);
  column-gap: clamp(2rem, 5vw, 5.5rem);
  row-gap: clamp(3rem, 6vw, 5.5rem);
  align-items: start;
}

.what-head {
  display: grid;
  gap: clamp(1rem, 1.8vw, 1.5rem);
  max-inline-size: 54ch;
}

.what-head .lede { max-width: 52ch; }

.what-media {
  position: relative;
  /* Keep the portrait frame at every breakpoint so the cart stays in view. */
  aspect-ratio: 4 / 5;
  box-shadow: var(--sh-2);
}

.what-media img,
.what-video {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center center;
}

.what-video { pointer-events: none; }
.what-video[hidden], .what-toggle[hidden] { display: none; }

.what-cap {
  position: absolute;
  display: flex;
  align-items: center;
  gap: .75rem;
  inset-inline: clamp(.75rem, 2vw, 1.25rem);
  inset-block-end: clamp(.75rem, 2vw, 1.25rem);
  padding: .7rem 1rem;
  border-radius: var(--r-sm);
  background: var(--porcelain);
  background: color-mix(in srgb, var(--porcelain) 88%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: var(--fs-eyebrow);
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--ink-2);
  text-align: center;
}

.what-cap span { flex: 1; }

.what-toggle {
  flex: 0 0 auto;
  min-inline-size: 44px;
  min-block-size: 44px;
  padding: .65rem .8rem;
  border: 1px solid var(--forest);
  border-radius: var(--r-pill);
  background: var(--forest);
  color: var(--porcelain);
  font: inherit;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}

.what-toggle:focus-visible { outline: 2px solid var(--forest); outline-offset: 3px; }

.what-steps {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-block-start: 1px solid var(--line);
  padding-block-start: clamp(2rem, 3.5vw, 3.2rem);
}

.what-step {
  display: grid;
  gap: .8rem;
  align-content: start;
  padding-inline: clamp(1.2rem, 2.6vw, 2.4rem);
}

.what-step:first-child { padding-inline-start: 0; }
.what-step:last-child  { padding-inline-end: 0; }
.what-step + .what-step { border-inline-start: 1px solid var(--line); }

.what-step .numeral { display: block; margin-block-end: .35rem; }
.what-step h3 { font-size: var(--fs-h4); font-family: var(--sans); font-weight: 400; }
.what-step p { font-size: var(--fs-small); color: var(--ink-2); line-height: 1.65; }

@media (min-width: 1024px) {
  /* the arch breaks the section rhythm slightly */
  .what-media { margin-block-start: clamp(-5rem, -3.6vw, -1.5rem); }
}

@media (max-width: 900px) {
  .what { grid-template-columns: minmax(0, 1fr); row-gap: clamp(2.4rem, 5vw, 3.4rem); }
  .what-steps { grid-template-columns: minmax(0, 1fr); padding-block-start: clamp(1.5rem, 4vw, 2.2rem); }
  .what-step { padding-inline: 0; padding-block: clamp(1.4rem, 3vw, 1.9rem); }
  .what-step:first-child { padding-block-start: 0; }
  .what-step + .what-step { border-inline-start: 0; border-block-start: 1px solid var(--line); }
}


/* ============================================================
   4. #perk — THE OFFICE PERK
   Calm and centred, between the asymmetric #experience and
   the card grid of #pour.
   ============================================================ */

.perk { border-block-start: 1px solid var(--line-soft); }

.perk-head {
  display: grid;
  gap: clamp(1rem, 1.8vw, 1.5rem);
  justify-items: center;
  text-align: center;
  max-inline-size: 68ch;
  margin-inline: auto;
}

.perk-head .lede {
  max-width: 62ch;
  text-align: center;
}

/* ---- The signature line-up, arced -------------------------- */

.perk-lineup {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(.2rem, 1.4vw, 1.6rem);
  inline-size: 100%;
  margin-block: clamp(2.5rem, 5vw, 4.5rem);
}

.perk-cup {
  flex: 0 1 auto;
  min-inline-size: 0;
  inline-size: auto;
  block-size: clamp(84px, 17vw, 250px);
  object-fit: contain;
  object-position: bottom center;
  transition: transform var(--t-slow) var(--ease);
}

/* a gentle arc — outer cups lowest, inner pair highest. Four cups
   on the menu now, so the peak sits between 2 and 3 rather than on
   a single centre cup. */
.perk-cup:nth-child(1) { transform: translateY(0) rotate(-5deg); }
.perk-cup:nth-child(2) { transform: translateY(-11%) rotate(-2deg); }
.perk-cup:nth-child(3) { transform: translateY(-11%) rotate(2deg); }
.perk-cup:nth-child(4) { transform: translateY(0) rotate(5deg); }

/* ---- Stat band --------------------------------------------- */

.perk-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-block: 1px solid var(--line);
}

.perk-stat {
  display: grid;
  gap: .5rem;
  align-content: start;
  padding: clamp(1.3rem, 2.4vw, 2rem) clamp(.9rem, 1.8vw, 1.6rem);
}

.perk-stat:first-child { padding-inline-start: 0; }
.perk-stat:last-child  { padding-inline-end: 0; }
.perk-stat + .perk-stat { border-inline-start: 1px solid var(--line); }

.perk-stat dt {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(1.85rem, 3.1vw, 2.85rem);
  line-height: 1;
  letter-spacing: -.022em;
  color: var(--ink);
  font-feature-settings: "lnum" 1;
}

.perk-stat dd {
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--ink-3);
  max-inline-size: 26ch;
}

/* ---- Supporting points ------------------------------------- */

.perk-points {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(2rem, 5vw, 4.5rem);
  max-inline-size: 62rem;
  margin-inline: auto;
  margin-block-start: clamp(2rem, 4vw, 3.2rem);
}

.perk-points li {
  position: relative;
  padding-block: clamp(.75rem, 1.4vw, 1.05rem);
  padding-inline-start: 1.6rem;
  border-block-end: 1px solid var(--line-soft);
  font-size: var(--fs-small);
  line-height: 1.62;
  color: var(--ink-2);
}

.perk-points li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: calc(clamp(.75rem, 1.4vw, 1.05rem) + .62em);
  inline-size: 5px;
  block-size: 5px;
  border-radius: 50%;
  background: var(--leaf);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .perk-lineup:hover .perk-cup:nth-child(1) { transform: translateY(-4%) rotate(-7deg); }
  .perk-lineup:hover .perk-cup:nth-child(2) { transform: translateY(-11%) rotate(-3.5deg); }
  .perk-lineup:hover .perk-cup:nth-child(3) { transform: translateY(-18%); }
  .perk-lineup:hover .perk-cup:nth-child(4) { transform: translateY(-11%) rotate(3.5deg); }
  .perk-lineup:hover .perk-cup:nth-child(5) { transform: translateY(-4%) rotate(7deg); }
}

@media (max-width: 820px) {
  .perk-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .perk-stat { padding-inline: clamp(.9rem, 3vw, 1.6rem); }
  .perk-stat:first-child,
  .perk-stat:nth-child(3) { padding-inline-start: 0; }
  .perk-stat:nth-child(2),
  .perk-stat:last-child { padding-inline-end: 0; }
  .perk-stat + .perk-stat { border-inline-start: 0; }
  .perk-stat:nth-child(even) { border-inline-start: 1px solid var(--line); }
  .perk-stat:nth-child(n + 3) { border-block-start: 1px solid var(--line); }
}

@media (max-width: 700px) {
  .perk-points { grid-template-columns: minmax(0, 1fr); }
}


/* ============================================================
   5. #pour — CHOOSE YOUR POUR
   ============================================================ */

#pour { border-block-start: 1px solid var(--line-soft); }

#pour .s-head { margin-block-end: clamp(2.6rem, 5vw, 4.6rem); }

.pour-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1rem, 2.2vw, 1.9rem);
  align-items: stretch;
}

.pour-card {
  position: relative;
  display: grid;
  align-content: start;
  gap: clamp(1.2rem, 2.2vw, 1.9rem);
  inline-size: 100%;
  text-align: start;
  padding: clamp(1.6rem, 2.8vw, 2.4rem);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  background: var(--porcelain);
  box-shadow: var(--sh-1);
  cursor: pointer;
  transition:
    background-color var(--t-mid) var(--ease),
    border-color var(--t-mid) var(--ease),
    box-shadow var(--t-mid) var(--ease),
    transform var(--t-mid) var(--ease);
}

/* selection ring, top-right */
.pour-card::before,
.pour-card::after {
  content: "";
  position: absolute;
  inset-block-start: clamp(1.1rem, 2vw, 1.5rem);
  inset-inline-end: clamp(1.1rem, 2vw, 1.5rem);
  border-radius: 50%;
  transition:
    border-color var(--t-mid) var(--ease),
    background-color var(--t-mid) var(--ease),
    transform var(--t-mid) var(--ease);
}

.pour-card::before {
  inline-size: 18px;
  block-size: 18px;
  border: 1px solid var(--line);
}

.pour-card::after {
  inline-size: 8px;
  block-size: 8px;
  margin: 5px;
  background: var(--olive);
  transform: scale(0);
}

.pour-card[aria-checked="true"] {
  background: var(--tea-wash);
  border-color: var(--tea);
  box-shadow: var(--sh-2);
}
.pour-card[aria-checked="true"]::before { border-color: var(--olive); }
.pour-card[aria-checked="true"]::after  { transform: scale(1); }

.pour-media {
  display: grid;
  place-items: center;
  position: relative;
  min-block-size: clamp(160px, 21vw, 250px);
}

/* soft ground shadow under the floating cup */
.pour-media::before {
  content: "";
  position: absolute;
  inset-block-end: 2%;
  inset-inline: 19%;
  block-size: 14px;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--line) 0%, transparent 100%);
  opacity: .95;
  transition: transform var(--t-mid) var(--ease), opacity var(--t-mid) var(--ease);
}

.pour-media img {
  position: relative;
  grid-area: 1 / 1;
  inline-size: auto;
  max-inline-size: 100%;
  block-size: clamp(150px, 19vw, 226px);
  object-fit: contain;
  transition: transform var(--t-mid) var(--ease);
}

/* the "both" card — two cups read as a pair */
.pour-media--pair img:first-of-type { transform: translateX(-26%) rotate(-6deg); z-index: 1; }
.pour-media--pair img:last-of-type  { transform: translateX(26%) rotate(6deg); }

.pour-body {
  display: grid;
  gap: .55rem;
  align-content: start;
}

.pour-title {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(1.65rem, 2.4vw, 2.15rem);
  line-height: 1.05;
  letter-spacing: -.018em;
  color: var(--ink);
}

.pour-copy {
  font-size: var(--fs-small);
  line-height: 1.65;
  color: var(--ink-2);
  max-inline-size: 44ch;
}

.pour-list {
  margin-block-start: .5rem;
  padding-block-start: .85rem;
  border-block-start: 1px solid var(--line);
  font-size: var(--fs-eyebrow);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  line-height: 1.7;
}

.pour-card[aria-checked="true"] .pour-list { border-block-start-color: var(--tea); }

.pour-foot {
  margin-block-start: clamp(2rem, 4vw, 3.2rem);
  margin-inline: auto;
  max-inline-size: 58ch;
  text-align: center;
  font-size: var(--fs-small);
  color: var(--ink-3);
}

@media (hover: hover) {
  .pour-card:hover { border-color: var(--latte); box-shadow: var(--sh-2); }
  .pour-card:hover .pour-media img { transform: translateY(-8px); }
  .pour-card:hover .pour-media--pair img:first-of-type { transform: translateX(-26%) translateY(-8px) rotate(-8deg); }
  .pour-card:hover .pour-media--pair img:last-of-type  { transform: translateX(26%) translateY(-8px) rotate(8deg); }
  .pour-card:hover .pour-media::before { transform: scaleX(1.12); opacity: .7; }
}

.pour-card:focus-visible { outline-offset: 4px; border-radius: var(--r-lg); }

@media (min-width: 640px) {
  .pour-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pour-card--both {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, .82fr) minmax(0, 1fr);
    align-items: center;
    column-gap: clamp(1.5rem, 3vw, 3rem);
  }
}

@media (min-width: 1080px) {
  .pour-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr); }
  .pour-card--both {
    grid-column: auto;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    padding: clamp(2rem, 3vw, 2.8rem);
  }
  .pour-card--both .pour-media { min-block-size: clamp(200px, 24vw, 290px); }
  .pour-card--both .pour-media img { block-size: clamp(180px, 22vw, 262px); }
  .pour-card--both .pour-title { font-size: clamp(1.9rem, 2.9vw, 2.6rem); }
}


/* ============================================================
   6. #occasions
   ============================================================ */

#occasions .s-head { margin-block-end: clamp(2.6rem, 5vw, 4.6rem); }

.occ-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.1rem, 2.1vw, 1.9rem);
}

.occ-card {
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  background: var(--porcelain);
  transition:
    transform var(--t-mid) var(--ease),
    box-shadow var(--t-mid) var(--ease),
    border-color var(--t-mid) var(--ease);
}

.occ-media {
  border-radius: 0;
  aspect-ratio: 4 / 5;
}

.occ-media img { block-size: 100%; }

.occ-body {
  display: flex;
  flex-direction: column;
  gap: .7rem;
  padding: clamp(1.3rem, 2.2vw, 1.9rem);
}

.occ-body h3 {
  font-size: clamp(1.35rem, 1.9vw, 1.7rem);
  line-height: 1.08;
}

.occ-body p {
  font-size: var(--fs-small);
  line-height: 1.65;
  color: var(--ink-2);
}

.occ-body .tagged {
  margin-block-start: auto;
  padding-block-start: clamp(.9rem, 1.6vw, 1.15rem);
  border-block-start: 1px solid var(--line-soft);
  line-height: 1.55;
}

@media (hover: hover) {
  .occ-card:hover { transform: translateY(-4px); border-color: var(--line); box-shadow: var(--sh-2); }
}

@media (max-width: 1000px) {
  .occ-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .occ-grid { grid-template-columns: minmax(0, 1fr); }
  .occ-media { aspect-ratio: 5 / 4; }
}


/* ============================================================
   7. #how — HOW IT WORKS
   ============================================================ */

#how .s-head { margin-block-end: clamp(2.6rem, 5vw, 4.6rem); }

.how-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(2rem, 5vw, 5rem);
  row-gap: clamp(2rem, 3.6vw, 3rem);
}

.how-step {
  display: grid;
  grid-template-columns: clamp(2.8rem, 5vw, 4.6rem) minmax(0, 1fr);
  column-gap: clamp(1rem, 2vw, 1.75rem);
  align-items: start;
  padding-block-start: clamp(1.2rem, 2.2vw, 1.75rem);
  border-block-start: 1px solid var(--line);
}

.how-step .numeral { line-height: .9; }

.how-step > div { display: grid; gap: .55rem; }

.how-step h3 {
  font-size: var(--fs-h4);
  font-family: var(--sans);
  font-weight: 400;
}

.how-step p {
  font-size: var(--fs-small);
  line-height: 1.68;
  color: var(--ink-2);
  max-inline-size: 46ch;
}

/* ---- What we bring / what you provide ---------------------- */

.how-lists {
  margin-block-start: clamp(3rem, 6vw, 5rem);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.1rem, 2.2vw, 2rem);
  align-items: start;
}

.how-list { display: grid; gap: 0; align-content: start; }

.how-list .eyebrow { margin-block-end: 1.1rem; }

.how-list ul { display: grid; }

.how-list li {
  position: relative;
  padding-block: clamp(.7rem, 1.3vw, .95rem);
  padding-inline-start: 1.5rem;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--ink-2);
}

.how-list li + li { border-block-start: 1px solid var(--line-soft); }

.how-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: calc(clamp(.7rem, 1.3vw, .95rem) + .62em);
  inline-size: 5px;
  block-size: 5px;
  border-radius: 50%;
  background: var(--leaf);
}

@media (max-width: 900px) {
  .how-steps { grid-template-columns: minmax(0, 1fr); }
  .how-lists { grid-template-columns: minmax(0, 1fr); }
}


/* ============================================================
   8. #gallery
   ============================================================ */

#gallery { border-block-start: 1px solid var(--line-soft); }

#gallery .s-head { margin-block-end: clamp(2.6rem, 5vw, 4.6rem); }

/* 4 columns: with tall = 2 rows and wide = 2 cols the six figures
   resolve into two full rows with no gaps and no uniform tile wall. */
.gal-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: clamp(150px, 14vw, 220px);
  grid-auto-flow: dense;
  gap: clamp(.75rem, 1.5vw, 1.35rem);
}

.gal-item {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--mist);
  cursor: zoom-in;
}

.gal-item img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.gal-open { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; padding: 0; border: 0; border-radius: inherit; background: transparent; cursor: zoom-in; }
.gal-open:focus-visible { outline: 3px solid var(--forest); outline-offset: -5px; }

.gal-item--tall { grid-row: span 2; }
.gal-item--wide { grid-column: span 2; }

.gal-item figcaption {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  padding: clamp(2.5rem, 6vw, 4rem) clamp(.9rem, 1.8vw, 1.35rem) clamp(.85rem, 1.6vw, 1.15rem);
  background: linear-gradient(to top, var(--paper) 8%, transparent 100%);
  font-size: var(--fs-eyebrow);
  letter-spacing: .18em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--ink-2);
  opacity: 1;
  transform: none;
  transition: opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease);
}

@media (hover: hover) {
  .gal-item figcaption { opacity: 0; transform: translateY(10px); }
  .gal-item:hover figcaption,
  .gal-item:focus-within figcaption { opacity: 1; transform: none; }
}

@media (max-width: 1099px) {
  .gal-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: clamp(150px, 25vw, 300px);
  }
}

@media (max-width: 560px) {
  .gal-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: auto;
  }
  .gal-item { aspect-ratio: 4 / 5; }
  .gal-item--tall { grid-row: auto; }
  .gal-item--wide { grid-column: auto; aspect-ratio: 4 / 3; }
}


/* ============================================================
   9. #bar — THE MENU
   ============================================================ */

.menu-wrap {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1fr);
  column-gap: clamp(2.5rem, 6vw, 6rem);
  row-gap: clamp(2.6rem, 5vw, 4rem);
  align-items: start;
}

.menu-copy {
  display: grid;
  gap: clamp(1rem, 1.8vw, 1.5rem);
  align-content: start;
}

.menu-list {
  display: grid;
  align-content: start;
  padding-block-start: .25rem;
}

.menu-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-block: clamp(.95rem, 1.8vw, 1.4rem);
  border-block-start: 1px solid var(--line);
}

.menu-item:first-child { border-block-start: 0; padding-block-start: 0; }

.menu-name {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(1.28rem, 2.05vw, 1.8rem);
  line-height: 1.14;
  letter-spacing: -.014em;
  color: var(--ink);
}

.menu-note {
  flex: none;
  max-inline-size: 24ch;
  text-align: end;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--ink-3);
}

.menu-foot {
  margin-block-start: clamp(1.2rem, 2.4vw, 1.9rem);
  padding-block-start: clamp(1.1rem, 2.2vw, 1.6rem);
  border-block-start: 1px solid var(--line);
  text-align: center;
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(.95rem, 1.3vw, 1.1rem);
  line-height: 1.6;
  color: var(--ink-3);
}

@media (max-width: 900px) {
  .menu-wrap { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  .menu-item { flex-direction: column; align-items: flex-start; gap: .2rem; }
  .menu-note { max-inline-size: none; text-align: start; }
}


/* ============================================================
   10. #custom — MAKE IT YOURS
   ============================================================ */

#custom { border-block-start: 1px solid var(--line-soft); }

.custom-wrap {
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(0, 1fr);
  column-gap: clamp(2.5rem, 6vw, 6rem);
  row-gap: clamp(2.4rem, 5vw, 3.5rem);
  align-items: center;
}

/* Cascade fix: base.css declares `.arch--soft` before `.frame`, so the
   plain `--r-lg` of `.frame` wins on this element. Restore the soft arch. */
.custom-media {
  aspect-ratio: 4 / 5;
  border-radius: 240px 240px var(--r-lg) var(--r-lg);
  box-shadow: var(--sh-2);
}

.custom-media img { block-size: 100%; }

.custom-copy {
  display: grid;
  gap: clamp(1rem, 1.8vw, 1.45rem);
  align-content: center;
}

.custom-copy > .btn { justify-self: start; margin-block-start: .5rem; }

.custom-list { display: grid; margin-block-start: .5rem; }

.custom-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: clamp(.9rem, 2.5vw, 2rem);
  padding-block: clamp(.75rem, 1.5vw, 1.05rem);
  border-block-start: 1px solid var(--line);
}

.custom-list li:last-child { border-block-end: 1px solid var(--line); }

.custom-list span {
  font-size: var(--fs-body);
  color: var(--ink);
  letter-spacing: -.002em;
}

.custom-list em {
  flex: none;
  max-inline-size: 26ch;
  text-align: end;
  font-style: normal;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--ink-3);
}

@media (max-width: 900px) {
  .custom-wrap { grid-template-columns: minmax(0, 1fr); }
  .custom-media { aspect-ratio: 5 / 4; }
}

@media (max-width: 560px) {
  .custom-list li { flex-direction: column; align-items: flex-start; gap: .15rem; }
  .custom-list em { max-inline-size: none; text-align: start; }
}


/* ============================================================
   11. #about — THE FOUNDER
   ============================================================ */

.about-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .72fr);
  column-gap: clamp(2.5rem, 6vw, 6rem);
  row-gap: clamp(2.4rem, 5vw, 3.5rem);
  align-items: start;
}

.about-copy {
  display: grid;
  gap: clamp(1rem, 1.8vw, 1.5rem);
  align-content: start;
  max-inline-size: 58ch;
}

.about-script {
  font-size: clamp(1.7rem, 3vw, 2.6rem);
  margin-block-start: .4rem;
}

.about-media { display: grid; }

.about-media .arch {
  aspect-ratio: 4 / 5;
  box-shadow: var(--sh-2);
}

.about-media figcaption {
  display: grid;
  gap: .15rem;
  margin-block-start: clamp(1.1rem, 2vw, 1.6rem);
  padding-inline-start: clamp(.9rem, 1.6vw, 1.2rem);
  border-inline-start: 1px solid var(--line);
}

.about-media figcaption strong {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  line-height: 1.15;
  color: var(--ink);
}

.about-media figcaption span {
  font-size: var(--fs-eyebrow);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
}

@media (min-width: 1024px) {
  .about-media { margin-block-start: clamp(1rem, 3vw, 3rem); }
}

@media (max-width: 900px) {
  .about-wrap { grid-template-columns: minmax(0, 1fr); }
  .about-media { max-inline-size: 420px; }
}


/* ============================================================
   12. #faq
   ============================================================ */

#faq { border-block-start: 1px solid var(--line-soft); }

.faq-wrap {
  max-inline-size: calc(820px + var(--gutter) * 2);
  display: grid;
  gap: clamp(2.2rem, 4.5vw, 3.6rem);
}

.faq-list { display: grid; }

.faq-item {
  border-block-start: 1px solid var(--line);
}

.faq-item:last-child { border-block-end: 1px solid var(--line); }

.faq-item summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1rem, 3vw, 2rem);
  padding-block: clamp(1.05rem, 2vw, 1.5rem);
  cursor: pointer;
  color: var(--ink);
  transition: color var(--t-fast) var(--ease);
}

.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { content: ""; }

.faq-item summary > span {
  font-size: clamp(1.02rem, 1.35vw, 1.2rem);
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: -.004em;
}

.faq-item summary::after {
  content: "+";
  flex: none;
  inline-size: 1.4em;
  font-family: var(--sans);
  font-weight: 200;
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  line-height: 1;
  text-align: center;
  color: var(--olive);
  transform-origin: 50% 50%;
  transition: transform var(--t-mid) var(--ease);
}

.faq-item[open] summary::after { transform: rotate(45deg); }

/* Smooth open/close with no JS height measuring */
.faq-item::details-content {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  content-visibility: hidden;
  transition:
    grid-template-rows var(--t-mid) var(--ease),
    content-visibility var(--t-mid) allow-discrete;
}

.faq-item[open]::details-content {
  grid-template-rows: 1fr;
  content-visibility: visible;
}

.faq-body {
  min-block-size: 0;
  overflow: hidden;
}

.faq-body p {
  padding-block-end: clamp(1.1rem, 2.2vw, 1.7rem);
  padding-inline-end: clamp(0rem, 4vw, 3.5rem);
  font-size: var(--fs-small);
  line-height: 1.72;
  color: var(--ink-2);
}

@media (hover: hover) {
  .faq-item summary:hover { color: var(--olive); }
}


/* ============================================================
   13. #inquire — LAYOUT SHELL + LEFT ASIDE
   (the form itself lives in css/inquiry.css)
   ============================================================ */

.inq-wrap {
  display: grid;
  grid-template-columns: minmax(0, .74fr) minmax(0, 1fr);
  column-gap: clamp(2.5rem, 6vw, 6rem);
  row-gap: clamp(2.4rem, 5vw, 3.5rem);
  align-items: start;
}

.inq-aside {
  display: grid;
  gap: clamp(1rem, 1.8vw, 1.5rem);
  align-content: start;
  position: sticky;
  inset-block-start: calc(66px + clamp(1.5rem, 4vw, 3rem));
}

.inq-aside .lede { color: var(--ink-2); }

.inq-facts {
  display: grid;
  margin-block-start: clamp(.75rem, 1.5vw, 1.25rem);
}

.inq-facts li {
  display: grid;
  gap: .4rem;
  padding-block: clamp(.95rem, 1.8vw, 1.3rem);
  border-block-start: 1px solid var(--tea);
}

.inq-facts li:last-child { border-block-end: 1px solid var(--tea); }

.inq-facts .tagged { color: var(--olive); }

.inq-facts p {
  font-size: var(--fs-small);
  line-height: 1.65;
  color: var(--ink-2);
  max-inline-size: 42ch;
}

@media (max-width: 979px) {
  .inq-wrap { grid-template-columns: minmax(0, 1fr); }
  .inq-aside { position: static; }
}


/* ============================================================
   14. FOOTER
   ============================================================ */

.footer {
  padding-block-start: clamp(3.5rem, 7vw, 6rem);
  padding-block-end: clamp(1.5rem, 3vw, 2.5rem);
  border-block-start: 1px solid var(--line);
}

.footer-inner {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.65fr) minmax(0, .85fr);
  column-gap: clamp(2rem, 5vw, 4.5rem);
  row-gap: clamp(2.5rem, 5vw, 3.5rem);
  align-items: start;
  padding-block-end: clamp(2.5rem, 5vw, 4rem);
}

.footer-brand { display: grid; gap: 1rem; align-content: start; justify-items: start; }

.footer-logo {
  inline-size: clamp(140px, 14vw, 190px);
  block-size: auto;
  object-fit: contain;
}

.footer-script {
  font-size: clamp(1.25rem, 1.9vw, 1.6rem);
  max-inline-size: 20ch;
}

.footer-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.footer-col { display: grid; gap: .55rem; align-content: start; }

.footer-col .tagged { margin-block-end: .35rem; color: var(--ink-3); }

.footer-col a {
  justify-self: start;
  position: relative;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--ink-2);
  padding-block-end: 2px;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size var(--t-mid) var(--ease), color var(--t-fast) var(--ease);
}

.footer-cta {
  display: grid;
  gap: 1.1rem;
  align-content: start;
  justify-items: start;
  padding: clamp(1.4rem, 2.4vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--linen);
}

.footer-cta .lede {
  font-family: var(--display);
  font-size: clamp(1.35rem, 2vw, 1.7rem);
  line-height: 1.12;
  letter-spacing: -.018em;
  color: var(--ink);
  max-inline-size: 14ch;
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .5rem 1.5rem;
  padding-block-start: clamp(1.2rem, 2.4vw, 1.8rem);
  border-block-start: 1px solid var(--line);
  font-size: var(--fs-eyebrow);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

@media (hover: hover) {
  .footer-col a:hover { background-size: 100% 1px; color: var(--olive); }
}

@media (max-width: 1000px) {
  .footer-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-cols { grid-column: 1 / -1; order: 3; }
  .footer-cta { order: 2; justify-self: stretch; }
}

@media (max-width: 620px) {
  .footer-inner { grid-template-columns: minmax(0, 1fr); }
  .footer-cols { grid-template-columns: minmax(0, 1fr); gap: 1.8rem; }
}


/* ============================================================
   15. LIGHTBOX
   ============================================================ */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  place-items: center;
  padding: clamp(1.25rem, 5vw, 3.5rem);
  background: var(--paper);
  background: color-mix(in srgb, var(--paper) 84%, transparent);
  -webkit-backdrop-filter: blur(26px) saturate(1.3);
  backdrop-filter: blur(26px) saturate(1.3);
  opacity: 0;
  transition: opacity var(--t-mid) var(--ease);
}

.lightbox[hidden] { display: none; }

.lightbox.is-open { opacity: 1; }

.lightbox-close {
  position: absolute;
  inset-block-start: clamp(1rem, 2.5vw, 2rem);
  inset-inline-end: clamp(1rem, 2.5vw, 2rem);
  z-index: 2;
  display: grid;
  place-items: center;
  inline-size: clamp(46px, 5vw, 56px);
  block-size: clamp(46px, 5vw, 56px);
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--porcelain);
  font-size: 1.6rem;
  font-weight: 200;
  line-height: 1;
  color: var(--ink);
  box-shadow: var(--sh-1);
  transition:
    background-color var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease),
    transform var(--t-fast) var(--ease);
}

.lightbox-figure {
  display: grid;
  justify-items: center;
  gap: clamp(.9rem, 1.8vw, 1.3rem);
  max-inline-size: min(100%, 1200px);
  transform: scale(.97) translateY(10px);
  transition: transform var(--t-mid) var(--ease);
}

.lightbox.is-open .lightbox-figure { transform: none; }

#lightbox-img {
  inline-size: auto;
  max-inline-size: 100%;
  max-block-size: 86vh;
  /* never taller than the viewport less the scrim padding + caption */
  max-block-size: min(86vh, calc(100dvh - 11rem));
  object-fit: contain;
  border-radius: var(--r-md);
  background: var(--mist);
  box-shadow: var(--sh-3);
}

#lightbox-cap {
  max-inline-size: 60ch;
  text-align: center;
  font-size: var(--fs-eyebrow);
  letter-spacing: .18em;
  text-transform: uppercase;
  line-height: 1.6;
  color: var(--ink-3);
}

@media (hover: hover) {
  .lightbox-close:hover {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--porcelain);
    transform: rotate(90deg);
  }
}

@media (max-width: 640px) {
  .lightbox-figure { gap: .8rem; }
  /* leaves room for the close button, which moves below the image */
  #lightbox-img {
    max-block-size: 66vh;
    max-block-size: min(72vh, calc(100dvh - 16rem));
  }
  /* centred under the image on phones — no transform, so the
     reduced-motion reset below cannot displace it */
  .lightbox-close {
    inset-block-start: auto;
    inset-block-end: clamp(1rem, 4vw, 2rem);
    inset-inline: 0;
    margin-inline: auto;
  }
}


/* ============================================================
   16. REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  /* the marquee freezes entirely; the .sr-only paragraph beside it
     already carries the same list for assistive tech */
  .marquee-track {
    animation: none !important;
    transform: none !important;
  }

  .nav,
  .nav-mark,
  .nav-panel,
  .nav-burger span,
  .nav-links a::after,
  .perk-cup,
  .pour-card,
  .pour-media img,
  .pour-media::before,
  .occ-card,
  .gal-item figcaption,
  .faq-item summary::after,
  .faq-item::details-content,
  .lightbox,
  .lightbox-figure,
  .lightbox-close,
  .footer-col a,
  .nav-panel > a {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }

  .lightbox-figure { transform: none; }
  .pour-card:hover { transform: none; }
  .occ-card:hover { transform: none; }
  .nav-brand:hover .nav-mark { transform: none; }
  .pour-card:hover .pour-media img { transform: none; }
  .pour-card:hover .pour-media::before { transform: none; }
  /* the pair offset is layout, not motion — keep it */
  .pour-media--pair img:first-of-type,
  .pour-card:hover .pour-media--pair img:first-of-type { transform: translateX(-26%) rotate(-6deg); }
  .pour-media--pair img:last-of-type,
  .pour-card:hover .pour-media--pair img:last-of-type { transform: translateX(26%) rotate(6deg); }
  .lightbox-close:hover { transform: none; }
  .gal-item figcaption { opacity: 1; transform: none; }

  /* neutralise the shared ken-burns inside the sections this file owns */
  .gal-item img,
  .occ-media img,
  .what-media img,
  .custom-media img,
  .about-media .arch img {
    transition: none !important;
    transform: none !important;
  }
}