/* ============================================================
   MILE 42 COFFEE — design system
   Deep-teal body (the navbar colour) throughout, lifted teal
   panels, cream text, caramel accents.
   Vollkorn display / Lato body. See DESIGN.md.
   ============================================================ */

:root {
  --teal-deep: #07282f;
  --teal-soft: #0e3944;
  --cream: #fbf5e9;
  --cream-dim: #f2e9d6;
  --caramel: #c77e32;
  --caramel-bright: #da8415;
  /* Caramel lifted 20% toward cream: small caramel text on the teal-soft panel.
     Base caramel is 3.8:1 there; this is 4.9:1 (6.1:1 on teal-deep). */
  --caramel-text: #d19657;
  --ink: #22333a;
  --hairline: rgba(7, 40, 47, 0.14);
  --hairline-light: rgba(251, 245, 233, 0.18);
  --shadow-warm: 0 18px 40px -18px rgba(7, 40, 47, 0.35);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --nav-h: 120px;
  --radius: 14px;
}

* { box-sizing: border-box; }
html { scroll-behavior: auto; }
body {
  margin: 0;
  background: var(--teal-deep);
  color: var(--cream);
  font-family: "Lato", sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: "Vollkorn", serif; color: var(--cream); margin: 0 0 0.5em; font-weight: 700; line-height: 1.12; }
p { margin: 0 0 1em; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.container-narrow { max-width: 860px; margin: 0 auto; padding: 0 24px; }

.eyebrow {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--caramel);
  margin-bottom: 14px;
}
.on-teal { color: var(--cream); }
.on-teal h1, .on-teal h2, .on-teal h3 { color: var(--cream); }

section { padding: 96px 0; }
.section-tight { padding: 64px 0; }
/* The page itself is teal now, so a plain band needs hairlines to read as a block;
   band-dim is the lifted panel surface. */
.band { background: var(--teal-deep); color: var(--cream); border-top: 1px solid var(--hairline-light); border-bottom: 1px solid var(--hairline-light); }
.band h2, .band h3 { color: var(--cream); }
.band-dim { background: var(--teal-soft); }
.band-dim :is(.eyebrow, .link-arrow, .menu-row .price, .menu-row .price-cols, .menu-block h2 .sizes, .info-line .label, .crumb a) { color: var(--caramel-text); }
.band-dim .link-arrow:hover { border-color: var(--caramel-text); }

.section-head { max-width: 640px; margin-bottom: 48px; }
.section-head h2 { font-size: clamp(2rem, 4vw, 3rem); }
.section-head p { font-size: 18px; }
.section-head.centered { margin-left: auto; margin-right: auto; text-align: center; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 30px;
  border-radius: 999px;
  font-family: "Lato", sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.22s var(--ease), background 0.22s var(--ease), color 0.22s var(--ease), border-color 0.22s var(--ease);
}
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--caramel); color: var(--teal-deep); }
.btn-primary:hover { background: var(--caramel-bright); transform: translateY(-2px); }
.btn-outline { border-color: rgba(251,245,233,0.55); color: var(--cream); background: transparent; }
.btn-outline:hover { background: var(--cream); color: var(--teal-deep); transform: translateY(-2px); }
.band .btn-outline, .hero .btn-outline { border-color: rgba(251,245,233,0.55); color: var(--cream); }
.band .btn-outline:hover, .hero .btn-outline:hover { background: var(--cream); color: var(--teal-deep); border-color: var(--cream); }
.link-arrow {
  font-weight: 700; color: var(--caramel); text-decoration: none;
  border-bottom: 1px solid transparent; transition: border-color 0.2s var(--ease);
}
.link-arrow:hover { border-color: var(--caramel); }

/* ---------- Nav ---------- */
.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: var(--teal-deep);
  border-bottom: 1px solid var(--hairline-light);
}
.navbar-inner {
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.nav-logo { display: flex; align-items: center; text-decoration: none; }
.nav-logo img { height: 104px; width: auto; }
.nav-links { display: flex; align-items: center; gap: 30px; }
.nav-links > a {
  color: var(--cream); text-decoration: none; font-size: 14.5px; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap;
  opacity: 0.92; transition: opacity 0.2s var(--ease), color 0.2s var(--ease);
}
.nav-links > a:hover, .nav-links > a[aria-current="page"] { opacity: 1; color: var(--caramel-bright); }
.nav-cta {
  background: var(--caramel); color: var(--teal-deep) !important; padding: 11px 22px;
  border-radius: 999px; opacity: 1 !important;
  transition: background 0.2s var(--ease) !important;
}
.nav-cta:hover { background: var(--caramel-bright); color: var(--teal-deep) !important; }

.nav-drop { position: relative; }
.nav-drop > button {
  background: none; border: 0; color: var(--cream); font: inherit; font-size: 14.5px;
  font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; cursor: pointer;
  opacity: 0.92; display: flex; align-items: center; gap: 6px; padding: 24px 0;
}
.nav-drop > button::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.nav-drop-panel {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(6px);
  background: var(--teal-soft); border: 1px solid var(--hairline-light); border-radius: 12px;
  padding: 10px; min-width: 210px; box-shadow: var(--shadow-warm);
  /* Not display:none. `visibility` alone gates hit-testing, and its flip is held
     back 0.28s on close — so during the fade-out the panel is still reachable and
     moving back onto it re-opens the menu instead of losing it. Do NOT add
     pointer-events:none here; that kills re-entry and the menu becomes a trap. */
  opacity: 0; visibility: hidden;
  transition: opacity 0.16s var(--ease) 0.12s, visibility 0s linear 0.28s;
}
/* Invisible bridge across the 6px gap under the button. Without it the pointer
   leaves .nav-drop on its way down to the links and the menu shuts for good. */
.nav-drop-panel::before {
  content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px;
}
.nav-drop:hover .nav-drop-panel, .nav-drop:focus-within .nav-drop-panel {
  opacity: 1; visibility: visible;
  transition: opacity 0.16s var(--ease) 0s, visibility 0s linear 0s;
}
.nav-drop-panel a {
  display: block; padding: 10px 14px; border-radius: 8px; color: var(--cream);
  text-decoration: none; font-size: 14.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
}
.nav-drop-panel a:hover { background: rgba(251,245,233,0.08); color: var(--caramel-bright); }

.nav-burger {
  display: none; background: none; border: 0; cursor: pointer; padding: 8px;
}
.nav-burger span { display: block; width: 26px; height: 2px; background: var(--cream); margin: 6px 0; transition: transform 0.3s var(--ease), opacity 0.3s var(--ease); }

.mobile-menu {
  display: none; position: fixed; inset: var(--nav-h) 0 0 0; z-index: 99;
  background: var(--teal-deep); padding: 28px 24px; overflow-y: auto;
}
.mobile-menu.open { display: block; }
.mobile-menu a {
  display: block; color: var(--cream); text-decoration: none; font-family: "Vollkorn", serif;
  font-size: 26px; padding: 13px 0; border-bottom: 1px solid var(--hairline-light);
}
.mobile-menu a:hover { color: var(--caramel-bright); }
.mobile-menu details { border-bottom: 1px solid var(--hairline-light); }
.mobile-menu summary {
  color: var(--cream); font-family: "Vollkorn", serif; font-size: 26px; padding: 13px 0;
  cursor: pointer; list-style: none;
}
.mobile-menu summary::-webkit-details-marker { display: none; }
.mobile-menu details a { font-size: 20px; padding-left: 18px; border-bottom: 0; }
body.menu-open { overflow: hidden; }
body.menu-open .nav-burger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
body.menu-open .nav-burger span:nth-child(2) { opacity: 0; }
body.menu-open .nav-burger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

main { padding-top: var(--nav-h); }

/* ---------- Hero ---------- */
.hero {
  position: relative; min-height: calc(100dvh - var(--nav-h));
  display: flex; align-items: center; overflow: hidden;
  background: var(--teal-deep);
}
.hero-media { position: absolute; inset: 0; }
.hero-media img, .hero-media video {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
}
.hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(7,40,47,0.92) 8%, rgba(7,40,47,0.72) 46%, rgba(7,40,47,0.38) 100%);
}
.hero-content { position: relative; z-index: 2; padding: 110px 0; max-width: 780px; }
.hero h1 {
  color: var(--cream); font-size: clamp(2.6rem, 5.2vw, 4.1rem); line-height: 1.06;
  margin-bottom: 22px;
}
.hero h1 .line { display: block; }
.hero-sub { color: rgba(251,245,233,0.88); font-size: clamp(17px, 2vw, 19.5px); max-width: 480px; margin-bottom: 34px; }
.hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; }
.hero-note { margin-top: 30px; color: rgba(251,245,233,0.62); font-size: 14px; letter-spacing: 0.06em; }

/* blur-rise entrance for hero lines */
.rise { opacity: 0; transform: translateY(26px); filter: blur(6px); animation: rise 0.9s var(--ease) forwards; }
.rise-1 { animation-delay: 0.05s; } .rise-2 { animation-delay: 0.17s; }
.rise-3 { animation-delay: 0.30s; } .rise-4 { animation-delay: 0.44s; } .rise-5 { animation-delay: 0.56s; }
@keyframes rise { to { opacity: 1; transform: none; filter: blur(0); } }

/* ---------- Homepage hero: Lower-Third Editorial (full-bleed video) ---------- */
.hero3 { position: relative; min-height: calc(100dvh - var(--nav-h)); display: flex; align-items: flex-end; overflow: hidden; background: var(--teal-deep); }
.hero3 .h3-media { position: absolute; inset: 0; }
.hero3 .h3-media video { width: 100%; height: 100%; object-fit: cover; }
/* The copy sits over the lower ~60% of the frame; the video has bright windows and
   counters there, so the scrim reaches readable depth before the eyebrow starts. */
.hero3 .h3-scrim { position: absolute; inset: 0; background:
  linear-gradient(90deg, rgba(7,40,47,0.5) 0%, rgba(7,40,47,0.2) 50%, rgba(7,40,47,0) 75%),
  linear-gradient(180deg, rgba(7,40,47,0.15) 0%, rgba(7,40,47,0.1) 18%, rgba(7,40,47,0.6) 40%, rgba(7,40,47,0.82) 62%, rgba(7,40,47,0.95) 100%); }
.hero3 .h3-content { position: relative; z-index: 2; width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 clamp(24px, 4vw, 48px) clamp(48px, 7vh, 92px); }
.hero3 .h3-head { color: var(--cream); font-size: clamp(2.6rem, 6.4vw, 5.4rem); line-height: 1.02; margin: 0 0 26px; max-width: 900px; }
/* The location eyebrow lives INSIDE the h1 so the page's one heading reads
   "Historic Downtown Loveland, Ohio: Creating community through coffee".
   Block + its own font/leading keep it exactly where it sat as a sibling
   (20.6px line + the old 14px margin + the h1's old 12px top margin). */
.hero3 .h3-head .eyebrow { display: block; font-family: "Lato", sans-serif; line-height: 1.65; margin: 0 0 26px; color: var(--cream); }
.hero3 .h3-content { text-shadow: 0 1px 14px rgba(7,40,47,0.75); }
/* On phones the copy block is tall and starts ~a quarter of the way down the frame,
   so the scrim has to reach reading depth much sooner (the copy spans the full width,
   so the left-side darkening does nothing here). */
@media (max-width: 760px) {
  .hero3 .h3-scrim { background: linear-gradient(180deg, rgba(7,40,47,0.2) 0%, rgba(7,40,47,0.55) 13%, rgba(7,40,47,0.74) 25%, rgba(7,40,47,0.86) 55%, rgba(7,40,47,0.95) 100%); }
}
.hero3 .h3-content .btn { text-shadow: none; }
.hero3 .h3-head .ln { display: block; overflow: hidden; }
.hero3 .h3-head .ln > i { display: block; font-style: normal; }
.hero3 .h3-ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.hero3 .h3-rule { height: 1px; background: linear-gradient(90deg, var(--caramel), rgba(199,126,50,0)); margin: 30px 0 18px; transform-origin: left; max-width: 520px; }
.hero3 .h3-info { color: rgba(251,245,233,0.72); font-size: 14.5px; letter-spacing: 0.04em; margin: 0; }
.hero3 .btn-outline { border-color: rgba(251,245,233,0.55); color: var(--cream); }
.hero3 .btn-outline:hover { background: var(--cream); color: var(--teal-deep); border-color: var(--cream); }

/* ---------- Scroll reveals ----------
   Only a section's heading (eyebrow + title) eases in, plus a subpage's hero on
   load. Everything else that carries .reveal (forms, menus, photos, paragraphs,
   buttons, maps, tiles) is simply there: Trevor, Oct 14 2026, "everytime you
   scroll you see one... it may be too much". The delay classes are scoped the
   same way so they never slow a button's own hover transition. */
.page-hero .reveal, .reveal:is(.eyebrow, h2, .section-head) { opacity: 0; transform: translateY(12px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.page-hero .reveal.in, .reveal.in:is(.eyebrow, h2, .section-head) { opacity: 1; transform: none; }
.page-hero .reveal-d1, .reveal-d1:is(.eyebrow, h2, .section-head) { transition-delay: 0.08s; }
.page-hero .reveal-d2, .reveal-d2:is(.eyebrow, h2, .section-head) { transition-delay: 0.16s; }

/* ---------- Editorial split ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.split > * { min-width: 0; }
.split-media { position: relative; }
.split-media img { border-radius: var(--radius); box-shadow: var(--shadow-warm); width: 100%; height: auto; }
.split-media .tucked {
  position: absolute; width: 38%; bottom: -26px; left: -26px;
  border: 5px solid var(--teal-soft); border-radius: 12px; box-shadow: var(--shadow-warm);
}
.band-dim .split-media .tucked { border-color: var(--teal-deep); }
.split h2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); }
.split .lead { font-size: 18.5px; }

/* ---------- Dotted-leader menu rows ---------- */
.menu-block h2 {
  font-size: 1.5rem; display: flex; align-items: baseline; gap: 16px; margin-bottom: 8px;
}
.menu-block h2 .sizes { margin-left: auto; font-family: "Lato", sans-serif; font-size: 12.5px; font-weight: 700; letter-spacing: 0.14em; color: var(--caramel); text-transform: uppercase; white-space: nowrap; }
.menu-rows { border-top: 1px dashed var(--hairline-light); }
.band .menu-rows { border-top-color: var(--hairline-light); }
.menu-row {
  display: flex; align-items: baseline; gap: 14px; padding: 15px 10px;
  border-bottom: 1px dashed var(--hairline-light); position: relative;
}
.band .menu-row { border-bottom-color: var(--hairline-light); }
.menu-row::before {
  content: ""; position: absolute; inset: 0; background: rgba(199,126,50,0.10);
  transform: scaleX(0); transform-origin: left; transition: transform 0.35s var(--ease);
  pointer-events: none;
}
.menu-row:hover::before { transform: scaleX(1); }
.menu-row .name { font-weight: 700; color: var(--cream); }
.band .menu-row .name { color: var(--cream); }
.menu-row .desc { color: rgba(251,245,233,0.66); font-size: 15px; }
.band .menu-row .desc { color: rgba(251,245,233,0.66); }
.menu-row .dots { flex: 1; border-bottom: 2px dotted rgba(199,126,50,0.55); transform: translateY(-4px); min-width: 24px; }
.menu-row .price { font-weight: 700; color: var(--caramel); font-variant-numeric: tabular-nums; white-space: nowrap; }
.menu-row:has(.price:empty) .dots { display: none; }

/* ---------- Menu item photos (real photos, hover/tap to enlarge) ---------- */
.menu-row.has-img { align-items: center; }
.menu-figure { position: relative; flex: 0 0 auto; width: 48px; height: 48px; outline: none; }
.menu-thumb {
  width: 48px; height: 48px; object-fit: cover; display: block;
  border-radius: 10px; border: 2px solid var(--teal-soft); background: var(--teal-soft);
  box-shadow: 0 4px 12px rgba(7, 40, 47, 0.25);
  transition: transform 0.24s var(--ease), box-shadow 0.24s var(--ease), border-color 0.24s var(--ease);
  cursor: zoom-in;
}
.band .menu-thumb { border-color: var(--teal-soft); }
.menu-figure:hover .menu-thumb,
.menu-figure:focus-visible .menu-thumb,
.menu-figure.zoomed .menu-thumb { transform: scale(1.06); border-color: var(--caramel); }
/* Framed popup that enlarges above the thumbnail (crisp full-res image) */
.menu-pop {
  position: absolute; bottom: calc(100% + 12px); left: 0;
  width: 240px; height: 240px; border-radius: 14px; overflow: hidden;
  border: 3px solid var(--cream); box-shadow: 0 26px 60px -14px rgba(7, 40, 47, 0.6);
  opacity: 0; transform: translateY(10px) scale(0.92); transform-origin: bottom left;
  transition: opacity 0.28s var(--ease), transform 0.28s var(--ease);
  pointer-events: none; z-index: 40;
}
.menu-pop::after {
  content: ""; position: absolute; left: 20px; top: 100%;
  border: 9px solid transparent; border-top-color: var(--cream);
}
.menu-pop img { width: 100%; height: 100%; object-fit: cover; display: block; }
.menu-figure:hover .menu-pop,
.menu-figure:focus-visible .menu-pop,
.menu-figure.zoomed .menu-pop { opacity: 1; transform: translateY(0) scale(1); }
@media (hover: none) { .menu-thumb { cursor: pointer; } }
@media (prefers-reduced-motion: reduce) {
  .menu-thumb, .menu-pop { transition: opacity 0.2s linear; }
  .menu-figure:hover .menu-thumb, .menu-figure.zoomed .menu-thumb { transform: none; }
  .menu-pop { transform: none; }
  .menu-figure:hover .menu-pop, .menu-figure.zoomed .menu-pop { transform: none; }
}
.menu-row .price-cols { display: flex; gap: 0; font-weight: 700; color: var(--caramel); font-variant-numeric: tabular-nums; white-space: nowrap; }
.menu-row .price-cols span { width: 58px; text-align: right; }
.menu-block h2 .sizes span { display: inline-block; width: 58px; text-align: right; }

/* ---------- Mile Line (signature) ---------- */
.mileline-wrap { position: relative; }
.mileline-svg { position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); height: 100%; width: 60px; overflow: visible; }
.mileline-svg .trail { stroke: rgba(251,245,233,0.22); }
.mileline-svg .trail-draw { stroke: var(--caramel); }
.mile-rider {
  position: absolute; left: 50%; top: 0; z-index: 3;
  width: 54px; height: 54px; margin-left: -27px; margin-top: -27px;
  background: var(--cream); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(0,0,0,0.35);
  will-change: transform;
}
.mile-rider svg { width: 32px; height: 32px; }
.mile-stops { position: relative; z-index: 2; display: flex; flex-direction: column; gap: clamp(90px, 14vh, 150px); }
.mile-stop { display: grid; grid-template-columns: 1fr 120px 1fr; align-items: center; gap: 8px; }
.mile-stop > * { min-width: 0; }
.mile-stop .stop-label { order: 1; text-align: right; }
.mile-stop .stop-marker { order: 2; display: flex; justify-content: center; }
.mile-stop .stop-body { order: 3; }
.mile-stop:nth-child(even) .stop-label { order: 3; text-align: left; }
.mile-stop:nth-child(even) .stop-body { order: 1; text-align: right; }
.stop-label .mile-no {
  font-family: "Vollkorn", serif; font-size: clamp(2rem, 3.4vw, 2.8rem); font-weight: 700;
  color: var(--caramel); line-height: 1;
}
.stop-label .mile-tag { font-size: 12.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(251,245,233,0.6); }
.stop-marker .dot {
  width: 18px; height: 18px; border-radius: 50%; background: var(--teal-deep);
  border: 3px solid var(--caramel); box-shadow: 0 0 0 6px rgba(199,126,50,0.16);
}
.stop-body h3 { font-size: 1.45rem; margin-bottom: 6px; }
.stop-body p { color: rgba(251,245,233,0.78); font-size: 16px; max-width: 380px; margin: 0; }
.mile-stop:nth-child(even) .stop-body p { margin-left: auto; }
.mile-finish { text-align: center; padding-top: clamp(90px, 14vh, 150px); position: relative; z-index: 2; }
.mile-finish .badge {
  width: 190px; height: 190px; margin: 0 auto 26px; border-radius: 50%;
  background: var(--teal-soft); border: 1px solid var(--hairline-light);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 0 rgba(199,126,50,0);
  /* transform/opacity are scrub-driven by the rider morph in main.js;
     only the arrival glow transitions here */
  transition: box-shadow 0.9s var(--ease);
}
.mile-finish.lit .badge { box-shadow: 0 0 90px 0 rgba(218,132,21,0.35), 0 0 0 10px rgba(199,126,50,0.15); }
.mile-finish .badge img { width: 150px; height: auto; }
.mile-finish h3 { font-size: clamp(1.8rem, 3vw, 2.4rem); }
.mile-finish p { color: rgba(251,245,233,0.78); max-width: 460px; margin: 0 auto 26px; }

/* ---------- Photo rail ---------- */
.rail-clip { overflow: hidden; }
.rail { display: flex; gap: 22px; width: max-content; will-change: transform; }
.rail figure { margin: 0; width: clamp(220px, 26vw, 330px); flex-shrink: 0; }
.rail img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); }
.rail figcaption { font-size: 13.5px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: rgba(251,245,233,0.6); padding-top: 10px; }
.band .rail figcaption { color: rgba(251,245,233,0.6); }

/* ---------- Visit / hours ---------- */
.hours-table { width: 100%; border-collapse: collapse; }
.hours-table td { padding: 13px 0; border-bottom: 1px dashed var(--hairline-light); font-size: 16.5px; }
.hours-table td:last-child { text-align: right; font-weight: 700; color: var(--cream); }
/* Seating note that sits under the hours (matches the shop's own posted policy) */
.hours-table .hours-note-row td { border-bottom: 0; padding-top: 14px; font-size: 14.5px; font-style: italic; text-align: left; font-weight: 400; opacity: 0.85; }
.info-line { display: flex; gap: 14px; align-items: baseline; padding: 13px 0; border-bottom: 1px dashed var(--hairline-light); }
.info-line .label { font-size: 12.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--caramel); width: 84px; flex-shrink: 0; }
.info-line a { color: var(--cream); font-weight: 700; text-decoration: none; border-bottom: 1px solid rgba(199,126,50,0.4); }
.info-line a:hover { border-color: var(--caramel); }

/* ---------- CTA band ---------- */
.cta-band { text-align: center; }
.cta-band h2 { font-size: clamp(2rem, 4.4vw, 3.2rem); max-width: 620px; margin: 0 auto 18px; }
.cta-band p { color: rgba(251,245,233,0.78); max-width: 480px; margin: 0 auto 32px; }
.cta-band .hero-ctas { justify-content: center; }

/* ---------- Page hero (subpages) ---------- */
.page-hero { padding: 84px 0 56px; }
.page-hero h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); }
.page-hero .lead { font-size: 19px; max-width: 620px; color: rgba(251,245,233,0.85); }
.crumb { font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 18px; }
.crumb a { color: var(--caramel); text-decoration: none; }
.crumb span { color: rgba(251,245,233,0.5); }

/* ---------- Forms ---------- */
.form-shell { background: var(--teal-soft); border: 1px solid var(--hairline-light); border-radius: 18px; padding: 40px; box-shadow: var(--shadow-warm); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-grid .full { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.field label { font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cream); }
.field input, .field select, .field textarea {
  font: inherit; color: var(--cream); background: rgba(251,245,233,0.07);
  border: 1px solid rgba(251,245,233,0.28); border-radius: 10px; padding: 13px 15px;
  min-width: 0; max-width: 100%; width: 100%;
}
.field input::placeholder, .field textarea::placeholder { color: rgba(251,245,233,0.45); }
/* Native dropdown lists render on the OS surface, so keep option text dark-on-light */
.field select option { color: var(--ink); background: var(--cream); }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--caramel); outline-offset: 1px; border-color: transparent; }
.field textarea { min-height: 140px; resize: vertical; }
/* Long application forms: grouped sections inside one form shell */
.form-subhead { font-size: 1.25rem; margin: 40px 0 6px; padding-top: 24px; border-top: 1px solid var(--hairline-light); }
.form-note { font-size: 15px; margin-bottom: 18px; opacity: 0.8; }
.form-legal { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--hairline-light); font-size: 14.5px; line-height: 1.6; opacity: 0.85; }
.form-legal p { margin-bottom: 12px; }
.turnstile-box { min-height: 68px; }
/* Turnstile renders a fixed 300px widget. Under 480px the card's 40px padding left
   260px, so it overran the card; under 400px it also gets a slight scale. */
@media (max-width: 480px) { .form-shell { padding: 28px 16px; } }
@media (max-width: 400px) { .turnstile-box .cf-turnstile { transform: scale(0.92); transform-origin: left top; } }
.form-msg { display: none; margin-top: 14px; font-weight: 700; }
.form-msg.error { display: block; color: #f2a184; }
.form-success { display: none; text-align: center; padding: 46px 20px; }
.form-success h3 { font-size: 1.8rem; }
form.sent { display: none; }
form.sent + .form-success { display: block; }

/* ---------- Contact layout ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 56px; align-items: start; }
.contact-grid > * { min-width: 0; }
@media (max-width: 1024px) { .contact-grid { grid-template-columns: 1fr; gap: 40px; } }

/* ---------- Footer ---------- */
footer { background: var(--teal-deep); color: var(--cream); padding: 80px 0 0; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 44px; padding-bottom: 56px; }
.footer-grid > div { min-width: 0; }
.footer-brand img { height: 124px; width: auto; margin-bottom: 18px; }
.footer-brand p { color: rgba(251,245,233,0.66); font-size: 15px; max-width: 280px; }
footer h2 { color: var(--caramel); font-family: "Lato", sans-serif; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 18px; }
.footer-links a { display: block; color: rgba(251,245,233,0.85); text-decoration: none; padding: 6px 0; font-size: 15.5px; }
.footer-links a:hover { color: var(--caramel-bright); }
.footer-meta p { color: rgba(251,245,233,0.85); font-size: 15.5px; margin-bottom: 12px; }
.footer-meta .hours-note { font-size: 14px; font-style: italic; color: rgba(251,245,233,0.7); }
.footer-meta a { color: var(--cream); text-decoration: none; border-bottom: 1px solid rgba(199,126,50,0.4); }
.footer-meta a:hover { border-color: var(--caramel); }
.footer-social { display: flex; gap: 14px; margin-top: 18px; }
.footer-social a { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: 1px solid var(--hairline-light); border-radius: 50%; transition: background 0.2s var(--ease); }
.footer-social a:hover { background: rgba(251,245,233,0.1); }
.footer-social svg { width: 18px; height: 18px; fill: var(--cream); }
.footer-bottom {
  border-top: 1px solid var(--hairline-light); padding: 22px 0;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 13.5px; color: rgba(251,245,233,0.55);
}
.fw-credit { display: inline-flex; align-items: center; gap: 8px; color: rgba(251,245,233,0.55); text-decoration: none; font-size: 13px; }
.fw-credit img { height: 20px; width: auto; opacity: 0.85; }

/* ---------- 404 ---------- */
.err-wrap { min-height: 60vh; display: flex; align-items: center; text-align: center; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .nav-links { display: none; }
  .nav-burger { display: block; }
  .split { grid-template-columns: 1fr; gap: 36px; }
  .split-media { order: -1; }
  .split-media img:not(.tucked) { max-height: 460px; object-fit: cover; }
  /* Single-column split: keep the inset photo inside the viewport */
  .split-media .tucked { left: 12px; bottom: -18px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  section { padding: 64px 0; }
  /* Mobile hero: solid teal panel, headline/CTAs FIRST, then the framed photo
     at its natural crop below the text — no full-bleed cover crop (reads
     over-zoomed and magnifies compression) */
  .hero { display: flex; flex-direction: column; min-height: 0; padding: 0; }
  .hero > .container { order: 1; }
  .hero-media { order: 2; position: relative; inset: auto; margin: 0 20px 32px; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-warm); }
  .hero-scrim { display: none; }
  .hero-content { padding: 44px 0 40px; }
  .form-grid { grid-template-columns: 1fr; }
  /* Mile line hugs the left edge on mobile — line, dots and rider share x=32px */
  .mileline-svg { left: 2px; transform: none; }
  .mile-rider { left: 32px; }
  .mile-stop { grid-template-columns: 64px 1fr; }
  .mile-stop .stop-label { order: 2 !important; text-align: left !important; grid-column: 2; }
  .mile-stop .stop-marker { order: 1; grid-row: 1 / span 2; justify-content: center; }
  .mile-stop .stop-body { order: 3 !important; text-align: left !important; grid-column: 2; }
  .mile-stop:nth-child(even) .stop-body p { margin-left: 0; }
  .menu-block h2 { flex-wrap: wrap; }
  .menu-row .price-cols span, .menu-block h2 .sizes span { width: 46px; }
  /* Menu rows: keep name + dots + price on one line, drop the description to its own line */
  .menu-row { flex-wrap: wrap; }
  .menu-row .desc { flex-basis: 100%; order: 4; margin-top: 2px; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .rise, .reveal { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; filter: none !important; }
  .rail { transform: none !important; }
}

/* ---------- Scroll film (merged from video variant) ---------- */
.scrollfilm-band { padding-bottom: 0; }
.scrollfilm-wrap { height: 340vh; position: relative; margin-top: 40px; }
.scrollfilm-sticky { position: sticky; top: var(--nav-h); height: calc(100vh - var(--nav-h)); overflow: hidden; }
.scrollfilm-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.scrollfilm-fallback { display: none; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scrollfilm-feather { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(7,40,47,0) 48%, rgba(7,40,47,0.65) 82%, #07282f 100%),
              linear-gradient(180deg, #07282f 0%, rgba(7,40,47,0) 16%, rgba(7,40,47,0) 84%, #07282f 100%); }
/* Caption band centers at ~58% height: right on the mug rim, below the pour */
.scrollfilm-caption { position: absolute; inset: 16% 0 0 0; padding: 0 24px; display: flex; align-items: center; justify-content: center; text-align: center; opacity: 0; transform: translateY(20px); will-change: transform, opacity; pointer-events: none; }
.scrollfilm-caption p { font-family: "Vollkorn", serif; font-weight: 700; font-size: clamp(1.5rem, 3.2vw, 2.5rem); line-height: 1.25; color: var(--cream); margin: 0;
  /* translucent brand-teal pill so the cream text reads over the cream mug */
  background: rgba(7, 40, 47, 0.55); padding: 12px 28px; border-radius: 18px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  text-shadow: 0 1px 12px rgba(7,40,47,0.6); }
@media (prefers-reduced-motion: reduce) {
  .scrollfilm-wrap { height: auto; }
  .scrollfilm-sticky { position: relative; height: 60vh; }
  .scrollfilm-canvas { display: none; }
  .scrollfilm-fallback { display: block; }
  .scrollfilm-caption { display: none; }
}

/* ---------- Category tiles (image-led menu navigation) ---------- */
.cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.cat-tile { position: relative; display: block; border-radius: var(--radius); overflow: hidden; aspect-ratio: 3 / 4; text-decoration: none; box-shadow: var(--shadow-warm); }
.cat-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); }
.cat-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,40,47,0) 28%, rgba(7,40,47,0.4) 58%, rgba(7,40,47,0.92) 100%); }
.cat-tile:hover img { transform: scale(1.06); }
.cat-label { position: absolute; z-index: 2; left: 20px; right: 20px; bottom: 18px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cat-label h3 { color: var(--cream); font-size: 1.4rem; margin: 0; }
.cat-label .arw { color: var(--caramel-bright); font-size: 1.5rem; line-height: 1; transition: transform 0.3s var(--ease); }
.cat-tile:hover .cat-label .arw { transform: translateX(6px); }
@media (max-width: 900px) { .cat-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
@media (max-width: 480px) { .cat-grid { grid-template-columns: 1fr; } .cat-tile { aspect-ratio: 16 / 10; } }

/* ---------- Menu photos (a real photo as its own cell in the menu grid) ---------- */
.menu-photo { position: relative; margin: 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-warm); }
.menu-photo img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.menu-photo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(7,40,47,0) 42%, rgba(7,40,47,0.42) 68%, rgba(7,40,47,0.92) 100%);
}
.menu-photo figcaption {
  position: absolute; z-index: 2; left: 22px; right: 22px; bottom: 18px;
  font-family: "Vollkorn", serif; font-weight: 700; font-size: 1.35rem;
  color: var(--cream); line-height: 1.15;
}
/* A full grid cell is ~548x685 on desktop, which dwarfs the menu it sits in.
   Cap it so the photo reads as an inset next to the board, not a hero. */
@media (min-width: 761px) { .menu-photo { max-width: 300px; } }
/* Coffee menu, two-column desktop: a 300px photo left dead space beside and
   below it. Fill the whole cell instead and take the height of the menu block
   next to it (the img is absolute so it never sets the row height). The tall
   one spans Add-ins + Other so the last block isn't left alone. 900px is where
   the auto-fit grid is reliably two columns; phones are untouched. */
@media (min-width: 900px) {
  .coffee-grid .menu-photo { max-width: none; align-self: stretch; min-height: 300px; }
  .coffee-grid .menu-photo img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
  .coffee-grid .menu-photo--tall { grid-row: span 2; }
}
/* Keep 4/5 and full width on phones — a letterboxed crop pushes the drink down
   under the caption, which is the one thing the photo is there to show. */
@media (max-width: 760px) { .menu-photo figcaption { font-size: 1.2rem; left: 18px; right: 18px; } }

/* ---------- Catering containers (client's own product cut-outs, transparent PNG) ---------- */
.cater-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; max-width: 640px; }
.cater-item { text-align: center; }
/* The Piggie is square and the Cambro is tall — pin a shared image height so the
   two sit on one baseline instead of rendering at wildly different sizes. */
.cater-item img { height: 210px; width: auto; margin: 0 auto 22px; object-fit: contain; }
.cater-item h3 { font-size: 1.3rem; margin-bottom: 2px; }
.cater-item p { color: rgba(251,245,233,0.66); font-size: 15px; margin: 0; }
@media (max-width: 560px) { .cater-grid { gap: 26px; } .cater-item img { height: 150px; margin-bottom: 16px; } .cater-item h3 { font-size: 1.1rem; } }

/* ---------- Visit: hours + map ---------- */
.visit-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 48px; align-items: start; }
.visit-grid > * { min-width: 0; }
.visit-hours-h { font-size: 1.2rem; margin: 26px 0 6px; }
.visit-map { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-warm); aspect-ratio: 4 / 3; background: var(--teal-soft); }
.visit-map iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 900px) { .visit-grid { grid-template-columns: 1fr; gap: 32px; } .visit-map { aspect-ratio: 16 / 11; } }

/* ---------- Instagram feed (client's own Elfsight app, carried over from Webflow) ---------- */
/* Reserve height so the third-party widget cannot shift the page while it loads. */
.ig-embed { min-height: 620px; border-radius: var(--radius); overflow: hidden; }
.ig-fallback { margin-top: 22px; text-align: center; }
@media (max-width: 760px) { .ig-embed { min-height: 760px; } }

/* The widget ships a white card, which is exactly the light slab this site avoids.
   Drop its own surfaces to transparent and hide its profile header — our section
   heading already says whose feed this is — so only the photos show, on the teal.
   These are Elfsight's own class names: if they rename them the widget simply
   reverts to its white chrome, it does not break. The proper fix is the colour
   scheme in Elfsight's dashboard (client's account). */
.ig-embed [class*="eapps-instagram-feed"] { background-color: transparent !important; }
.ig-embed .eapps-instagram-feed-header-container,
.ig-embed .eapps-instagram-feed-title-container,
.ig-embed .eapps-instagram-feed-data-status-container { display: none !important; }