/* PajaCoffee - main stylesheet */
:root {
  --logo: url("../assets/logo-full.png");
  --mark: url("../assets/logo-mark.png");
  --blue: #253372;
  --yellow: #fbcd10;
  --ink: var(--yellow);
  --accent: var(--yellow);
  --line: var(--yellow);
  --font: "Fredoka", "Baloo 2", "Nunito", system-ui, sans-serif;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: env(safe-area-inset-top, 0px);
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--blue) url("../assets/wave.png") 0 0 /
    clamp(900px, 100vw, 1400px) auto repeat;
  color: var(--ink);
  font: 400 1.1rem/1.6 var(--font);
}
a {
  color: inherit;
}
/* no grey tap box / focus box on mouse or touch clicks (keyboard focus ring stays) */
html,
a,
button,
[role="button"] {
  -webkit-tap-highlight-color: transparent;
}
:focus:not(:focus-visible) {
  outline: none;
}
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 4px;
}
/* Fixed header: nav left, logo right */
header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: calc(env(safe-area-inset-top, 0px) + clamp(16px, 3vh, 36px))
    max(clamp(20px, 5vw, 72px), env(safe-area-inset-right, 0px))
    clamp(12px, 2vh, 18px)
    max(clamp(20px, 5vw, 72px), env(safe-area-inset-left, 0px));
}
/* blurred glass strip behind the nav, fading out smoothly into the page (no visible edge line) */
header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: -30px;
  z-index: -1;
  pointer-events: none;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  background: linear-gradient(rgba(37, 51, 114, 0.25), rgba(37, 51, 114, 0));
  -webkit-mask-image: linear-gradient(#000 30%, transparent);
  mask-image: linear-gradient(#000 30%, transparent);
}
nav {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(18px, 5vw, 72px);
}
nav a {
  /* not selected: engraved into the surface (darker fill, dark edge above, light edge below) */
  color: #b3900a;
  transform: translateY(1px);
  text-shadow:
    0 -1px 0 rgba(8, 12, 40, 0.55),
    0 1px 0 rgba(255, 255, 255, 0.2);
  font: 700 clamp(1.1rem, 2.4vw, 1.7rem) var(--font);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
  display: inline-block;
  padding: 4px 0;
}
nav a {
  transition:
    text-shadow 0.15s ease,
    color 0.15s ease,
    transform 0.15s ease;
}
/* selected (after click / current page): pops out in front (bright fill, stacked edge, drop shadow) */
nav a[aria-current="true"] {
  color: var(--yellow);
  transform: translateY(-1px);
  text-shadow:
    0 2px 0 rgba(8, 12, 40, 0.5),
    0 3px 4px rgba(0, 0, 0, 0.22);
}
.logo {
  width: clamp(80px, 10vw, 132px);
  aspect-ratio: 520/736;
  background: var(--logo) center/contain no-repeat;
  filter: drop-shadow(0 0 2px var(--blue)) drop-shadow(0 0 5px var(--blue));
}
#home {
  position: relative;
}
.home-logo {
  position: absolute;
  z-index: 11;
  top: calc(env(safe-area-inset-top, 0px) + clamp(96px, 14vh, 130px));
  right: max(clamp(20px, 5vw, 72px), env(safe-area-inset-right, 0px));
}
/* One scrolling page: three stacked sections */
section {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 130px max(clamp(20px, 5vw, 72px), env(safe-area-inset-left, 0px))
    80px;
}
#home {
  isolation: isolate;
  overflow: hidden;
  background: var(--blue);
}
.slides {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: var(--blue);
}
.track {
  display: flex;
  height: 100%;
  transition: transform 0.7s cubic-bezier(0.7, 0, 0.2, 1);
}
.slide {
  flex: 0 0 100%;
  height: 100%;
  display: flex;
  gap: 0;
  background: var(--blue);
}
.slide img {
  flex: 1 1 0;
  min-width: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
  display: block;
}
.arrow {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  z-index: 12;
  display: grid;
  place-items: center;
  width: 48px;
  height: 64px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--yellow);
  cursor: pointer;
}
.arrow svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.arrow.prev {
  left: max(clamp(12px, 2.5vw, 40px), env(safe-area-inset-left, 0px));
}
.arrow.next {
  right: max(clamp(12px, 2.5vw, 40px), env(safe-area-inset-right, 0px));
}
@media (prefers-reduced-motion: reduce) {
  .track {
    transition: none;
  }
}
.big {
  font: 700 clamp(2.4rem, 8vw, 6.4rem)/0.95 var(--font);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin: 0;
  transform: rotate(-7deg) skewX(-8deg);
}
.big span {
  display: block;
}
.big span + span {
  margin-left: 1.3em;
}
.info {
  max-width: 560px;
  margin: 44px 0 0;
  display: grid;
  gap: 20px;
}
.info p,
.info dd {
  margin: 0;
}
.info dt {
  font-weight: 700;
  color: var(--accent);
}
.row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.pill {
  display: inline-block;
  border: 3px solid var(--yellow);
  padding: 10px 26px;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  justify-self: start;
}
.menu-grid {
  width: 100%;
  max-width: 75rem;
  min-height: 62vh;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: "coffee logo non" "snacks logo add";
  gap: clamp(28px, 6vw, 56px) clamp(10px, 9vw, 150px);
  align-items: center;
  justify-items: center;
}
.menu-grid > * {
  min-width: 0;
}
.menu-logo {
  grid-area: logo;
  position: relative;
  width: clamp(44px, 12vw, 170px);
  aspect-ratio: 459/600;
  background: none;
  filter: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* two stacked copies; the incoming one fades in FIRST, then the outgoing one drops away,
   so the logo never goes see-through mid-transition (that caused a dark flash) */
.menu-logo::before,
.menu-logo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--mark) center/contain no-repeat;
}
/* sunk into the background: soft, slightly dimmed, dark edge on top and light edge below */
.menu-logo::before {
  opacity: 0.88;
  filter: blur(0.9px) drop-shadow(0 -2px 2px rgba(8, 12, 40, 0.7))
    drop-shadow(0 2px 1px rgba(255, 255, 255, 0.14));
  transition: opacity 0.06s ease-out 0s; /* back to blur: snaps in almost at once, no delay */
}
/* tapped: sharp copy */
.menu-logo::after {
  opacity: 0;
  transition: opacity 0.14s ease-out 0s; /* back to blur: starts leaving immediately (blurred copy is already in underneath) */
}
.menu-logo.sharp::before {
  opacity: 0;
  transition: opacity 0.14s ease-out 0.14s; /* to sharp: leaves after the sharp copy is in */
}
.menu-logo.sharp::after {
  opacity: 1;
  transition: opacity 0.14s ease-out 0s; /* to sharp: fades in at once */
}
.big.cat {
  font-size: clamp(0.95rem, 4.3vw, 3.8rem);
}
.big.cat span {
  white-space: nowrap;
}
.big.cat {
  text-align: center;
}
.big.cat span + span {
  margin-left: 0;
}
.cat-btn {
  display: block;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  color: inherit;
  font: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  text-align: inherit;
  cursor: pointer;
  /* raised, 3D look: stacked dark edge + soft drop shadow */
  text-shadow:
    0 1px 0 #1d2860,
    0 2px 0 #1b2659,
    0 3px 0 #192353,
    0 4px 0 #161f4b,
    0 5px 0 #131a42,
    0 12px 14px rgba(0, 0, 0, 0.45);
}
/* ---------- Yellow liquid drip transition ---------- */
.cat-layer {
  --drip: clamp(150px, 26vh, 280px);
  position: fixed;
  inset: 0;
  z-index: 20;
  transform: translateY(calc(-100% - var(--drip)));
  transition: transform 1.05s cubic-bezier(0.55, 0.05, 0.25, 1);
  will-change: transform;
}
.cat-layer.open {
  transform: translateY(0);
}
/* The dripping lower edge (colour = layer colour, shape = mask) */
.cat-layer::after {
  content: "";
  position: absolute;
  left: -1px;
  right: -1px;
  top: calc(100% - 1px);
  height: var(--drip);
  background: var(--fill);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0H100V16C98 16 97.500 34 95.500 34S93 16 90.500 16 88.500 50 85.500 50 83 16 79.500 16 77.500 26 75.500 26 73 16 69.500 16 67.500 78 64 78 61.500 16 57.500 16 55.500 38 52.500 38 50 16 46 16 44 58 41 58 38.500 16 34.500 16 32.500 30 30 30 27.500 16 23.500 16 21.500 90 18 90 15 16 11.500 16 9.500 44 6.500 44 4 16 0 16Z'/%3E%3C/svg%3E")
    0 0 / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0H100V16C98 16 97.500 34 95.500 34S93 16 90.500 16 88.500 50 85.500 50 83 16 79.500 16 77.500 26 75.500 26 73 16 69.500 16 67.500 78 64 78 61.500 16 57.500 16 55.500 38 52.500 38 50 16 46 16 44 58 41 58 38.500 16 34.500 16 32.500 30 30 30 27.500 16 23.500 16 21.500 90 18 90 15 16 11.500 16 9.500 44 6.500 44 4 16 0 16Z'/%3E%3C/svg%3E")
    0 0 / 100% 100% no-repeat;
  pointer-events: none;
}
#cat-wipe {
  --fill: var(--yellow);
  background: var(--yellow);
  transition-delay: 0.2s; /* on close: yellow lifts after the blue panel */
}
#cat-wipe.open {
  transition-delay: 0s;
}
#cat-panel {
  --fill: var(--blue);
  background: var(--blue);
  z-index: 21;
  transition-duration: 1.1s;
}
#cat-panel.open {
  transition-delay: 0.22s; /* blue follows the yellow down */
}
.cat-scroll {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.cat-back {
  position: absolute;
  z-index: 3;
  top: calc(env(safe-area-inset-top, 0px) + clamp(16px, 3vh, 36px));
  left: clamp(20px, 5vw, 72px);
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  font: 700 clamp(1.1rem, 2.4vw, 1.7rem) var(--font);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 4px 0;
}
.cat-inner {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 120px 24px 64px;
}
.cat-head {
  text-align: center;
  font-size: clamp(2.2rem, 7vw, 5rem);
  opacity: 0;
  translate: 0 40px;
  transition:
    opacity 0.5s,
    translate 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.cat-head span + span {
  margin-left: 0;
}
#cat-panel.open .cat-head {
  opacity: 1;
  translate: 0 0;
  transition-delay: 0.95s;
}
.mlist {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  width: min(35rem, 100%);
}
.mi {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 7px 0;
  font-size: 1.15rem;
  opacity: 0;
  translate: 0 24px;
  transition:
    opacity 0.45s,
    translate 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
}
#cat-panel.open .mi {
  opacity: 1;
  translate: 0 0;
  transition-delay: calc(1.08s + var(--i, 0) * 0.055s);
}
.mi i {
  flex: 1;
  border-bottom: 2px dotted var(--yellow);
  opacity: 0.45;
  transform: translateY(-4px);
}
.mi b {
  font-weight: 700;
}
.mi small {
  display: block;
  font-size: 0.72em;
  opacity: 0.85;
  line-height: 1.3;
}
@media (prefers-reduced-motion: reduce) {
  .cat-layer,
  .cat-head,
  .mi {
    transition: none !important;
  }
  .cat-layer::after {
    display: none;
  }
}
@media (max-width: 640px) {
  .row {
    grid-template-columns: 1fr;
  }
  .big {
    transform: rotate(-5deg) skewX(-6deg);
  }
}

/* ---------- Responsive ---------- */
/* Phones (portrait): logo sits under the nav so they never collide; photo focuses on the kiosk */
@media (max-width: 520px) {
  .home-logo {
    top: calc(env(safe-area-inset-top, 0px) + 104px);
    width: 84px;
  }
  nav {
    gap: 16px;
  }
  .info .row {
    gap: 20px;
  }
}
/* Portrait: the 4 photos are stacked top-to-bottom and share exactly one screen
   (cropped to fit), so the home page never spills into the Menu section */
@media (max-aspect-ratio: 1/1) {
  .track {
    flex-direction: column;
    transform: none !important;
    transition: none;
  }
  .slide {
    position: relative;
    flex: 1 1 0;
    min-height: 0;
    height: auto;
  }
  .slide img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 55%;
  }
  .arrow {
    display: none;
  }
}
/* Portrait: Menu is its own full screen -
   coffee | non-coffee on top, logo in the middle, snacks | add-ons at the bottom */
@media (max-aspect-ratio: 1/1) {
  #menu {
    min-height: 100vh;
    min-height: 100svh;
    padding: 120px max(20px, env(safe-area-inset-left, 0px)) 72px;
  }
  #menu .menu-grid {
    width: 100%;
    min-height: calc(100svh - 192px);
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr auto 1fr;
    grid-template-areas:
      "coffee non"
      "logo logo"
      "snacks add";
    gap: 32px 8px;
    align-items: center;
    justify-items: center;
    align-content: stretch;
  }
  #menu .big.cat {
    font-size: clamp(1.05rem, 5.4vw, 3.6rem);
  }
  #menu .menu-logo {
    width: clamp(110px, 30vw, 220px);
  }
}
/* Touch devices: bigger tap areas without changing the look */
@media (pointer: coarse) {
  nav a,
  .cat-back {
    padding: 12px 0;
  }
  .cat-btn {
    padding: 10px 6px;
  }
  .pill {
    padding: 14px 28px;
  }
}
/* Tablets in portrait: logo on top, headings in a 2x2 grid */
@media (min-width: 600px) and (max-width: 1023px) and (max-aspect-ratio: 1/1) {
  .big {
    font-size: clamp(3rem, 10vw, 5.4rem);
  }
  .mi {
    font-size: 1.3rem;
    padding: 9px 0;
  }
  .cat-head {
    font-size: clamp(3rem, 9vw, 5.4rem);
  }
}
/* Landscape phones / short screens: keep 3 columns, tighter vertical padding */
@media (max-height: 520px) {
  section {
    padding-top: 84px;
    padding-bottom: 40px;
  }
  .menu-grid {
    min-height: 0;
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas: "coffee logo non" "snacks logo add";
    gap: 28px clamp(24px, 6vw, 80px);
  }
  .menu-logo {
    width: clamp(90px, 16vh, 130px);
  }
  .big.cat {
    font-size: clamp(1.4rem, 3.6vw, 2.4rem);
  }
  .cat-inner {
    padding: 84px 24px 40px;
  }
  .cat-head {
    font-size: clamp(1.8rem, 6vh, 3rem);
  }
  .mlist {
    margin-top: 20px;
  }
  .mi {
    padding: 5px 0;
    font-size: 1rem;
  }
  .home-logo {
    top: calc(env(safe-area-inset-top, 0px) + 64px);
    width: 72px;
  }
}
/* Large monitors / TVs: scale everything up proportionally */
@media (min-width: 1800px) {
  html {
    font-size: 125%;
  }
}
@media (min-width: 2400px) {
  html {
    font-size: 150%;
  }
}
@media (min-width: 3200px) {
  html {
    font-size: 200%;
  }
}

/* ---------- Find us: rapi & sejajar ---------- */
.info {
  width: 100%;
  max-width: 560px;
  margin-top: 36px;
  gap: 24px;
}
.info dt {
  font-size: 0.95rem;
}
.info dd {
  font-size: 1rem;
  line-height: 1.5;
}
.links {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
}
.pill {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  justify-self: stretch;
  text-align: center;
  white-space: nowrap;
  padding: 10px 6px;
  border-width: 2px;
  font-size: clamp(0.68rem, 2.4vw, 1rem);
  line-height: 1.2;
}

/* ---------- Mobile: ukuran pas, margin tepi tipis ---------- */
@media (max-width: 520px) {
  section {
    padding: 100px max(16px, env(safe-area-inset-left, 0px)) 56px;
  }
  header {
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
    padding-bottom: 12px;
  }
  nav {
    gap: 18px;
  }
  nav a {
    font-size: 1.05rem;
    padding: 6px 0;
  }
  .home-logo {
    top: calc(env(safe-area-inset-top, 0px) + 104px);
    right: max(16px, env(safe-area-inset-right, 0px));
    width: 76px;
  }
  .big {
    font-size: clamp(2.6rem, 12.5vw, 3.4rem);
  }
  .menu-grid {
    min-height: min(68svh, 560px);
    align-content: center;
    gap: clamp(72px, 12svh, 110px) 6px;
  }
  .menu-logo {
    width: clamp(56px, 18vw, 84px);
  }
  .big.cat {
    font-size: clamp(1.05rem, 5.2vw, 1.6rem);
  }
  .info {
    margin-top: 32px;
    gap: 26px;
  }
  .info .row {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .info dt {
    font-size: 1rem;
  }
  .info dd {
    font-size: 1rem;
    line-height: 1.5;
  }
  .pill {
    padding: 12px 2px;
    font-size: 0.72rem;
  }
  .cat-back {
    padding: 6px 0;
    left: 16px;
  }
  .cat-inner {
    padding: 92px 18px 48px;
  }
  .cat-head {
    font-size: clamp(2.2rem, 12vw, 3.2rem);
  }
  .mlist {
    margin-top: 32px;
  }
  .mi {
    font-size: 1.1rem;
    padding: 7px 0;
    gap: 8px;
  }
}

/* ---------- Find us: judul satu baris ---------- */
#find-t {
  white-space: nowrap;
  margin-bottom: clamp(48px, 7vw, 88px);
}
#find-t span {
  display: inline;
}
#find-t span + span {
  margin-left: 0.3em;
}

@media (max-width: 520px) {
  .arrow {
    width: 32px;
    height: 44px;
  }
}

/* ---------- Find us: mind-map layout (yellow strings) ---------- */
/* Strings are drawn by js/find.js from the real positions of the title and pills */
.find-wrap {
  container-type: inline-size;
  position: relative;
  width: 100%;
  max-width: 1120px;
  aspect-ratio: 1000 / 480;
}
.strings {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
/* strings sit "behind": slightly soft with a faint shadow; buttons pop in front */
.strings {
  filter: blur(1.2px) drop-shadow(0 3px 3px rgba(8, 12, 40, 0.45));
}
.string {
  fill: none;
  stroke: var(--yellow);
  stroke-width: 6px;
  stroke-linecap: round;
  stroke-dasharray: 1 1;
}
#find-t {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  margin: 0;
  font-size: 9.5cqw;
  line-height: 1;
  /* raised, 3D look: stacked dark edge + soft drop shadow */
  text-shadow:
    0 1px 0 #1d2860,
    0 2px 0 #1b2659,
    0 3px 0 #192353,
    0 4px 0 #161f4b,
    0 5px 0 #131a42,
    0 12px 14px rgba(0, 0, 0, 0.45);
}
/* Address block is a link to Maps: looks like plain text, no hover effect */
.info-link {
  display: block;
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.find-wrap .pill {
  position: absolute;
  translate: -50% -50%;
  width: auto;
  padding: 0.5em 1.3em;
  border-width: 4.5px;
  font-size: max(0.85rem, 1.9cqw);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.2;
  white-space: nowrap;
  background-color: var(--blue);
  box-shadow:
    0 4px 0 rgba(8, 12, 40, 0.6),
    0 10px 18px rgba(0, 0, 0, 0.4);
  transition:
    background-color 0.2s,
    color 0.2s;
}
.find-wrap .pill:hover,
.find-wrap .pill:focus-visible {
  background: var(--yellow);
  color: var(--blue);
}
.p-wa {
  left: 9%;
  top: 86%;
  --pd: 1s;
}
.p-ig {
  left: 89%;
  top: 23%;
  --pd: 1.3s;
}
.p-maps {
  left: 11%;
  top: 14%;
  --pd: 1.15s;
}
.p-tt {
  left: 91%;
  top: 77%;
  --pd: 1.45s;
}

/* Strings draw themselves once, when the section scrolls into view */
.armed .string {
  stroke-dashoffset: 1;
}
.armed.in .string {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.1s cubic-bezier(0.6, 0, 0.25, 1) var(--d);
}
.armed .find-wrap .pill {
  opacity: 0;
  scale: 0.85;
}
.armed.in .find-wrap .pill {
  opacity: 1;
  scale: 1;
  transition:
    opacity 0.4s var(--pd),
    scale 0.5s cubic-bezier(0.3, 1.5, 0.5, 1) var(--pd),
    background-color 0.2s,
    color 0.2s;
}

/* Phones / portrait: normal flow, nothing is absolutely positioned,
   so text and buttons can never overlap */
@media (max-width: 760px), (max-aspect-ratio: 1/1) {
  .find-wrap {
    max-width: 460px;
    aspect-ratio: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "wa ig"
      "title title"
      "maps tt";
    padding: 0 6px;
  }
  #find-t {
    position: static;
    translate: none;
    grid-area: title;
    justify-self: center;
    font-size: min(16cqw, 4.4rem);
    margin: 56px 0 56px;
  }
  .find-wrap .pill {
    position: static;
    translate: none;
    align-self: start;
    font-size: 0.95rem;
  }
  .p-wa {
    grid-area: maps;
    justify-self: start;
    margin-top: 56px;
  }
  .p-ig {
    grid-area: ig;
    justify-self: end;
    margin-top: 44px;
  }
  .p-maps {
    grid-area: wa;
    justify-self: start;
  }
  .p-tt {
    grid-area: tt;
    justify-self: end;
    margin-top: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .armed .string,
  .armed.in .string {
    stroke-dashoffset: 0;
    transition: none;
  }
  .armed .find-wrap .pill {
    opacity: 1;
    scale: 1;
  }
}

/* ---------- Footer: address + opening hours (compact, its own band) ---------- */
.site-footer {
  padding: 18px max(clamp(20px, 5vw, 72px), env(safe-area-inset-left, 0px))
    calc(14px + env(safe-area-inset-bottom, 0px));
  background: rgba(20, 28, 70, 0.55);
  border-top: 2px solid var(--yellow);
  font-size: 0.82rem;
  line-height: 1.4;
}
.foot-grid {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 24px;
}
.foot-grid dl,
.foot-grid dd {
  margin: 0;
}
.foot-grid dt {
  font-weight: 700;
  margin-bottom: 2px;
}
.foot-copy {
  max-width: 1000px;
  margin: 12px auto 0;
  font-size: 0.7rem;
  opacity: 0.7;
}
@media (max-width: 520px) {
  .site-footer {
    padding: 14px max(16px, env(safe-area-inset-left, 0px))
      calc(10px + env(safe-area-inset-bottom, 0px));
    font-size: 0.72rem;
  }
  .foot-grid {
    gap: 10px 14px;
  }
  .foot-copy {
    margin-top: 8px;
    font-size: 0.65rem;
  }
}