/* Contact page. Structure: Eat Happy « Kontakt » (bright hero with sushi sticker,
   dark tiles per contact reason, address next to a tilted photo) + OLIPOP
   « Contact us » (icon per tile, rounded FAQ rows). Bar: .design/bar.md */


/* ---- Hero ----------------------------------------------------------------- */
.c-hero { background: var(--p-tamago); padding: 56px 0 48px; overflow: hidden; }
.c-hero__grid { display: grid; grid-template-columns: 1.4fr 1fr; align-items: center; gap: 32px; }
.c-hero h1 { font-size: clamp(44px, 5.4vw, 80px); max-width: 12ch; }
.c-hero__lead { font-size: 19px; max-width: 520px; margin: 18px 0 18px; text-wrap: pretty; }
.c-chips { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.c-chips li { background: var(--riz); border-radius: 50px; padding: 6px 14px; font-size: 15px; }
.c-hero__doodle { position: relative; width: min(340px, 100%); justify-self: center; transform: rotate(-6deg); }
.c-hero__doodle span { position: absolute; left: 63%; top: 9.5%; width: 30%; text-align: center; transform: rotate(4deg); font: 900 clamp(14px, 1.7vw, 24px)/1 var(--sp-display); color: var(--nori); }

/* ---- 4 tiles (Eat Happy tiles + OLIPOP icons) -------------------------------- */
.c-ways { background: var(--brume); }
.c-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.c-tiles a {
  display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 24px 22px 26px;
  border-radius: 16px; background: var(--nori); color: var(--riz); text-decoration: none;
  transition: transform .2s ease;
}
.c-tiles a:hover { transform: translateY(-4px); }
.c-tiles a:focus-visible { outline: 3px solid var(--saumon); outline-offset: 3px; }
.c-tiles svg { width: 40px; height: 40px; margin-bottom: 10px; fill: none; stroke: var(--p-tamago); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.c-tiles b { font: 900 24px/1.1 var(--sp-display); }
.c-tiles span { font-size: 15px; color: #d9e4dc; line-height: 1.45; }

/* ---- Find us --------------------------------------------------------------- */
.c-find__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.c-find h2 { font-size: clamp(38px, 4.4vw, 58px); margin-bottom: 16px; }
.c-big { font-size: 19px; margin: 0 0 22px; max-width: 520px; text-wrap: pretty; }
.c-small { font-size: 15px; margin: 10px 0 0; }
.c-find__photo { margin: 0; padding: 0 12px; }
.c-find__photo img { border-radius: 16px; transform: rotate(2.5deg); }
.c-find__photo figcaption { margin-top: 14px; font-size: 15px; text-align: center; }
.c-map { margin-top: 48px; border-radius: 16px; overflow: hidden; background: var(--p-wasabi); display: grid; }
.c-map__ph { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px; padding: 22px 28px; }
.c-map__ph p { margin: 0; max-width: 620px; font-size: 16px; }
.c-map iframe { width: 100%; height: 420px; border: 0; display: block; }

/* ---- Arrival steps ---------------------------------------------------------- */
.c-arrive { background: var(--p-gingembre); }
.c-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; counter-reset: a; }
.c-steps li { counter-increment: a; position: relative; }
.c-steps img { border-radius: 16px; aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.c-steps li:nth-child(1) img { transform: rotate(-2deg); } .c-steps li:nth-child(3) img { transform: rotate(2deg); }
.c-steps li::before {
  content: counter(a); position: absolute; z-index: 1; left: -8px; top: -14px; width: 48px; height: 48px;
  display: grid; place-items: center; border-radius: 50%; background: var(--nori); color: var(--riz);
  font: 900 24px var(--sp-display);
}
.c-steps p { margin: 16px 0 0; font-size: 17px; text-wrap: pretty; }

/* ---- FAQ (OLIPOP rounded rows) ----------------------------------------------- */
.c-faq__in { max-width: 860px; }
.c-faq__list { display: grid; gap: 10px; }
.c-faq details { background: #fff; border-radius: 16px; }
.c-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 22px; border-radius: 16px; }
.c-faq summary::-webkit-details-marker { display: none; }
.c-faq summary::after {
  content: ""; flex: none; width: 12px; height: 12px; border-right: 2.5px solid var(--nori); border-bottom: 2.5px solid var(--nori);
  transform: rotate(45deg) translate(-3px, -3px); transition: transform .2s ease;
}
.c-faq details[open] summary::after { transform: rotate(225deg) translate(-3px, -3px); }
.c-faq summary:focus-visible { outline: 3px solid var(--saumon); outline-offset: 2px; }
.c-faq h3 { margin: 0; font: 700 18px/1.35 var(--sp-body); }
.c-faq details p { margin: 0; padding: 0 22px 20px; font-size: 17px; text-wrap: pretty; }
.c-faq details a { font-weight: 700; }

@media (max-width: 1023.98px) {
  .c-tiles { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 899.98px) {
  .c-hero { padding: 36px 0 20px; }
  .c-hero__grid { grid-template-columns: 1fr; gap: 8px; }
  .c-hero__doodle { width: 180px; justify-self: end; margin-top: -10px; }
  .c-hero__doodle span { font-size: 15px; }
  .c-map__ph { padding: 20px; }
  .c-find__grid { grid-template-columns: 1fr; gap: 36px; }
  .c-steps { grid-template-columns: 1fr; gap: 36px; }
  .c-map { margin-top: 40px; }
}
@media (max-width: 520px) {
  .c-tiles { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .c-tiles a, .c-tiles a:hover { transition: none; transform: none; }
}

/* ---- Delivery ---------------------------------------------------------------- */
.c-deliv { background: var(--p-tamago); }
.c-deliv h2 { font-size: clamp(38px, 4.4vw, 58px); margin-bottom: 16px; }
.c-deliv .c-btns { margin-top: 22px; }