/*
  Ported 1:1 from the Claude Design project's inline styles (index.dc.html,
  SiteNav.dc.html, SiteFooter.dc.html) into a real stylesheet - same
  "plain CSS, not Jaspr's typed CSS DSL" decision as ../roska_web/web/styles/app.css,
  and the same oklch() palette/spacing values the design specified, just given
  class names instead of being repeated inline on every element.
*/

:root {
  --bg: oklch(0.97 0.01 80);
  --ink: oklch(0.2 0.02 100);
  --green: oklch(0.36 0.08 150);
  --green-dark: oklch(0.22 0.03 150);
  --green-darker: oklch(0.16 0.03 150);
  --gold: oklch(0.68 0.11 80);
  --gold-ink: oklch(0.15 0.03 60);
  --gold-soft: oklch(0.85 0.11 80);
  --border: oklch(0.88 0.02 90);

  --font-display: 'Sora', sans-serif;
  --font-body: 'Public Sans', sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  /* Sticky footer: body is a flex column that fills at least the viewport,
     the footer is pushed to the bottom via margin-top:auto - so a short
     page (e.g. /routes placeholder) never leaves a white band under the
     footer, but a tall page still scrolls normally. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.footer {
  margin-top: auto;
}

a {
  color: var(--green);
}
a:hover {
  color: oklch(0.3 0.08 150);
}

h1, h2, h3 {
  font-family: var(--font-display);
  margin: 0;
}

img {
  max-width: 100%;
  display: block;
}

/* Buttons */

.btn {
  text-decoration: none;
  font-weight: 700;
  font-size: 15px;
  padding: 14px 26px;
  border-radius: 8px;
  display: inline-block;
}
.btn--primary {
  background: var(--gold);
  color: var(--gold-ink);
  transition: background 0.15s ease;
}
/* Overrides the global `a:hover` darken below - on a gold button, that dark
   green reads as barely-there instead of as hover feedback. */
.btn--primary:hover {
  background: oklch(0.62 0.11 80);
  color: var(--gold-ink);
}
.btn--ghost {
  background: oklch(0.98 0 0 / 0.12);
  border: 1px solid oklch(0.9 0.01 100 / 0.6);
  color: #fff;
  transition: background 0.15s ease;
}
.btn--ghost:hover {
  background: oklch(0.98 0 0 / 0.22);
  color: #fff;
}

/* Nav */

.nav {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 32px;
  font-family: var(--font-body);
  position: sticky;
  top: 0;
  z-index: 50;
  background: oklch(0.97 0.01 80 / 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.nav--overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  /* Transparent over the hero video. The soft top-down fade (rather than a
     flat `transparent`) keeps the white/gold nav text legible if a bright
     frame - sky, spray off the falls - scrolls under it, without drawing a
     visible bar edge. */
  background: linear-gradient(
    180deg,
    oklch(0.16 0.03 150 / 0.5) 0%,
    oklch(0.16 0.03 150 / 0.2) 60%,
    oklch(0.16 0.03 150 / 0) 100%
  );
  /* Inherited from `.nav`, but blurring the video behind the bar fights the
     transparency - keep the footage crisp edge to edge. */
  backdrop-filter: none;
  border-bottom: none;
}

.nav__brand {
  display: flex;
  flex-direction: column;
  line-height: 1;
  text-decoration: none;
  color: var(--green-dark);
  flex-shrink: 0;
}
.nav--overlay .nav__brand {
  color: #fff;
}
.nav__brand-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.01em;
}
.nav__brand-tagline {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 2px;
  color: oklch(0.45 0.06 150);
}
.nav--overlay .nav__brand-tagline {
  color: oklch(0.88 0.02 100);
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  min-width: 0;
  flex: 0 1 auto;
  margin-left: auto;
}
.nav__links::-webkit-scrollbar {
  display: none;
}

.nav__link {
  padding: 8px 12px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
  color: oklch(0.32 0.02 100);
}
.nav--overlay .nav__link {
  color: oklch(0.99 0 0);
}
.nav__link--active {
  color: var(--green);
  background: oklch(0.9 0.03 150);
}
.nav--overlay .nav__link--active {
  color: var(--gold-soft);
  background: transparent;
}
.nav__link--cta {
  color: var(--gold-ink) !important;
  background: var(--gold) !important;
  transition: background 0.15s ease;
}
.nav__link--cta:hover {
  background: oklch(0.62 0.11 80) !important;
}

.nav__lang {
  display: flex;
  border: 1px solid oklch(0.8 0.02 90);
  border-radius: 999px;
  overflow: hidden;
  font-size: 13px;
  font-weight: 600;
  flex-shrink: 0;
}
.nav--overlay .nav__lang {
  border-color: oklch(0.99 0 0 / 0.4);
}
.nav__lang-btn {
  border: none;
  cursor: pointer;
  padding: 6px 12px;
  text-decoration: none;
  color: oklch(0.4 0.02 100);
}
.nav--overlay .nav__lang-btn {
  color: oklch(0.88 0.02 100);
}
.nav__lang-btn--active {
  background: var(--green);
  color: #fff;
}
.nav--overlay .nav__lang-btn--active {
  background: oklch(0.99 0 0 / 0.2);
  color: #fff;
}

/* Hero */

.hero {
  position: relative;
  height: 88vh;
  min-height: 560px;
  overflow: hidden;
}
.hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__media.img-slot--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, oklch(0.3 0.05 150), oklch(0.18 0.03 150));
  color: oklch(0.85 0.02 100);
  font-size: 14px;
  text-align: center;
  padding: 24px;
}
.hero__scrim {
  position: absolute;
  inset: 0;
  /* Semi-transparent so the hero video reads through it. Darkest at the
     bottom, where the title/subtitle/buttons sit and need the contrast. */
  background: linear-gradient(
    180deg,
    oklch(0.16 0.03 150 / 0.3) 0%,
    oklch(0.16 0.03 150 / 0.45) 45%,
    oklch(0.16 0.03 150 / 0.75) 100%
  );
  pointer-events: none;
}
.hero__content {
  position: relative;
  z-index: 10;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 40px;
}
.hero__eyebrow {
  color: var(--gold-soft);
  font-weight: 700;
  letter-spacing: 0.16em;
  font-size: 13px;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.hero__title {
  font-weight: 800;
  font-size: clamp(44px, 7vw, 88px);
  line-height: 1.02;
  color: #fff;
  margin: 0 0 22px;
  max-width: 1000px;
  text-shadow: 0 2px 24px oklch(0 0 0 / 0.4);
}
.hero__subtitle {
  font-size: 18px;
  line-height: 1.6;
  color: oklch(0.95 0.01 100);
  max-width: 600px;
  margin: 0 0 32px;
  text-shadow: 0 1px 12px oklch(0 0 0 / 0.5);
}
.hero__actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Intro */

.section--intro {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 88px 40px 64px;
  text-align: center;
}
.section--intro__title {
  font-weight: 700;
  font-size: 32px;
  margin: 0 0 20px;
  color: var(--green-dark);
}
.section--intro__body {
  font-size: 17px;
  line-height: 1.8;
  color: oklch(0.32 0.02 100);
  margin: 0;
}

/* Cards grid */

.cards-grid {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px 96px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}
.card {
  text-decoration: none;
  color: inherit;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}
.card__media {
  height: 160px;
}
.card__media .img-slot {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.card__media .img-slot--placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: oklch(0.93 0.02 90);
  color: oklch(0.5 0.02 100);
  font-size: 12px;
  text-align: center;
  padding: 12px;
}
.card__body {
  padding: 20px 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.card__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--green-dark);
}
.card__desc {
  font-size: 14px;
  line-height: 1.5;
  color: oklch(0.42 0.02 100);
  margin: 0;
}
.card__link {
  margin-top: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--green);
}

/* Advertise CTA band */

.cta-band {
  background: var(--green);
  padding: 64px 40px;
  display: flex;
  justify-content: center;
}
.cta-band__inner {
  max-width: 760px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.cta-band__title {
  font-weight: 800;
  font-size: 30px;
  color: #fff;
}
.cta-band__body {
  font-size: 16px;
  line-height: 1.7;
  color: oklch(0.92 0.02 150);
  margin: 0;
}

/* Reviews */

.reviews {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 88px 40px 96px;
}
.reviews__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}
.reviews__eyebrow {
  color: oklch(0.55 0.1 80);
  font-weight: 700;
  letter-spacing: 0.14em;
  font-size: 12px;
  text-transform: uppercase;
}
.reviews__title {
  font-weight: 700;
  font-size: 30px;
  margin: 12px 0 0;
  color: var(--green-dark);
}
.reviews__rating {
  display: flex;
  align-items: center;
  gap: 14px;
}
.reviews__rating-value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 34px;
  color: var(--green-dark);
  line-height: 1;
}
.reviews__rating-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.reviews__stars {
  color: var(--gold);
  font-size: 16px;
  letter-spacing: 2px;
}
.reviews__count {
  font-size: 13px;
  color: oklch(0.45 0.02 100);
}
.reviews__empty {
  color: oklch(0.45 0.02 100);
}
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
.review-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.review-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.review-card__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: oklch(0.9 0.03 150);
  color: var(--green);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}
.review-card__name {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: oklch(0.25 0.02 100);
}
.review-card__when {
  display: block;
  font-size: 12px;
  color: oklch(0.5 0.02 100);
}
.review-card__stars {
  color: var(--gold);
  font-size: 14px;
  letter-spacing: 2px;
}
.review-card__text {
  font-size: 14px;
  line-height: 1.65;
  color: oklch(0.38 0.02 100);
  margin: 0;
}
.review-card__more {
  align-self: flex-start;
  border: none;
  background: none;
  padding: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--green);
  cursor: pointer;
  text-decoration: underline;
}
.review-card__more:hover {
  color: var(--green-dark);
}
/* Full-review overlay opened by web/js/review-dialog.js - same
   fixed-backdrop pattern as .lightbox, but a white card instead of a photo,
   since this is text. */
.review-dialog {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: oklch(0.1 0 0 / 0.6);
}
.review-dialog.review-dialog--open {
  display: flex;
}
.review-dialog__card {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: 84vh;
  overflow-y: auto;
  background: #fff;
  border-radius: 16px;
  padding: 32px;
}
.review-dialog__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border: none;
  background: oklch(0.95 0.01 90);
  color: oklch(0.35 0.02 100);
  cursor: pointer;
  border-radius: 999px;
  font-size: 22px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.review-dialog__close:hover {
  background: oklch(0.9 0.02 90);
}
.review-dialog__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding-right: 36px;
}
.review-dialog__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: oklch(0.9 0.03 150);
  color: var(--green);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.review-dialog__name {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: oklch(0.25 0.02 100);
}
.review-dialog__when {
  display: block;
  font-size: 13px;
  color: oklch(0.5 0.02 100);
}
.review-dialog__text {
  font-size: 15px;
  line-height: 1.7;
  color: oklch(0.35 0.02 100);
  margin: 0;
  white-space: pre-line;
}
.reviews__link {
  display: inline-block;
  margin-top: 26px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

/* Sponsors - a big, standalone band (not a footer afterthought) meant to
   double as a pitch: other local associations should look at this and want
   to be featured here too. Tinted background sets it apart from the plain
   --bg sections above/below it, same way .cta-band uses a solid colour to
   stand out. */
.sponsors {
  width: 100%;
  background: oklch(0.94 0.02 85);
  padding: 80px 40px;
}
.sponsors__inner {
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}
.sponsors__eyebrow {
  color: oklch(0.55 0.1 80);
  font-weight: 700;
  letter-spacing: 0.14em;
  font-size: 12px;
  text-transform: uppercase;
}
.sponsors__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(26px, 3.5vw, 34px);
  margin: 12px 0 0;
  color: var(--green-dark);
}
.sponsors__intro {
  max-width: 560px;
  margin: 14px auto 0;
  font-size: 15px;
  line-height: 1.6;
  color: oklch(0.42 0.02 100);
}
.sponsors__grid {
  margin-top: 44px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 32px;
}
/* No card/background - the logo (a transparent PNG) sits directly on the
   section's tinted background. A subtle opacity fade is the only "this is
   clickable" affordance, since a card treatment was deliberately dropped. */
.sponsors__link {
  display: inline-flex;
  transition: opacity 0.2s ease;
}
.sponsors__link:hover {
  opacity: 0.75;
}
.sponsors__logo {
  display: block;
  height: 150px;
  width: auto;
}
@media (max-width: 640px) {
  .sponsors {
    padding: 56px 20px;
  }
  .sponsors__logo {
    height: 110px;
  }
}

/* Footer */

.footer {
  background: var(--green-dark);
  color: oklch(0.92 0.01 100);
  padding: 56px 40px 28px;
}
.footer__grid {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}
.footer__brand {
  max-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer__brand-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  color: #fff;
}
.footer__tagline {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: oklch(0.8 0.02 100);
}
.footer__fb {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--gold);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
}
.footer__fb-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
}
.footer__col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer__label {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: oklch(0.6 0.02 100);
  margin-bottom: 4px;
}
.footer__label--spaced {
  margin-top: 12px;
}
.footer__link, .footer__text {
  color: oklch(0.9 0.01 100);
  text-decoration: none;
  font-size: 14px;
}
/* Overrides the global `a:hover` darken below - on the dark green footer,
   that dark green hover colour is nearly the same as the background. */
.footer__link:hover {
  color: var(--gold-soft);
}
.footer__fb:hover {
  color: var(--gold-soft);
}
.footer__bottom {
  max-width: 1200px;
  margin: 40px auto 0;
  padding-top: 20px;
  border-top: 1px solid oklch(0.35 0.02 150);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 13px;
  color: oklch(0.6 0.02 100);
}
.footer__credit {
  font-size: 12px;
  letter-spacing: 0.04em;
  color: oklch(0.55 0.02 100);
}
.footer__credit-name {
  font-weight: 700;
  color: oklch(0.85 0.02 100);
  text-decoration: none;
}
.footer__credit-name:hover {
  color: var(--gold-soft);
}

/* Not-found page */

.placeholder {
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  padding: 96px 40px;
  text-align: center;
}
.placeholder__title {
  font-size: 36px;
  color: var(--green-dark);
  margin-bottom: 16px;
}
.placeholder__body {
  font-size: 16px;
  color: oklch(0.4 0.02 100);
}

/* Shared page header (routes, infrastructure, villages, guides) */

.page-header {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 72px 40px 24px;
  text-align: center;
}
.page-header__eyebrow {
  color: oklch(0.55 0.1 80);
  font-weight: 700;
  letter-spacing: 0.14em;
  font-size: 12px;
  text-transform: uppercase;
}
.page-header__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(34px, 5vw, 52px);
  margin: 14px 0;
  color: var(--green-dark);
}
.page-header__intro {
  font-size: 16px;
  line-height: 1.7;
  color: oklch(0.4 0.02 100);
  max-width: 640px;
  margin: 0 auto;
}

/* /routes - map + route cards */

/* Full-bleed - no max-width/side padding, so the map itself runs edge to
   edge of the viewport rather than sitting inside the ~1100px content
   column the rest of the page uses. */
.routes-map {
  padding: 24px 0 8px;
}
.routes-map__frame {
  background: #fff;
}
.routes-map__note {
  font-size: 13px;
  color: oklch(0.5 0.02 100);
  margin: 14px auto 0;
  text-align: center;
  max-width: 1100px;
  padding: 0 40px;
}
.map {
  width: 100%;
  overflow: hidden;
  z-index: 0;
}
.map--routes {
  height: 460px;
}
@media (min-width: 900px) {
  .map--routes {
    height: 600px;
  }
}

/* Leaflet pin + legend styles - carried over from ../roska_web with the
   palette swapped for this site's tokens. */
.map-pin {
  background: transparent;
  border: none;
  pointer-events: auto;
}
.map-pin__dot {
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px oklch(0 0 0 / 0.35);
  margin: 0 auto;
}
.map-pin__label {
  display: block;
  margin-top: 4px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  color: var(--green-dark);
  text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff;
  text-align: center;
  white-space: nowrap;
}
/* The Πανταβρέχει destination pin - a teardrop marker instead of the plain
   dot every other pin uses (markup in web/js/map.js), so it reads as "the
   place" at a glance rather than just another stop. */
.map-pin__marker {
  display: block;
  width: 26px;
  margin: 0 auto;
}
.map-pin__marker-body {
  fill: var(--green-dark);
  filter: drop-shadow(0 2px 4px oklch(0 0 0 / 0.4));
}
.map-pin__marker-dot {
  fill: var(--gold);
}
.map-pin__label--destination {
  font-weight: 800;
  font-size: 13px;
}
.map-legend {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 12px;
  font-family: var(--font-body);
  box-shadow: 0 4px 12px oklch(0 0 0 / 0.08);
}
.map-legend__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 0;
}
.map-legend__row i {
  display: inline-block;
  width: 22px;
  height: 4px;
  border-radius: 2px;
}
/* Mirrors the polyline's `dashArray` so the legend swatch matches the line
   it explains. Colour arrives as `--legend-color` from map.js. */
.map-legend__swatch--dashed {
  background: repeating-linear-gradient(
    90deg,
    var(--legend-color) 0 5px,
    transparent 5px 9px
  );
  border-radius: 0;
}
.map-legend__hint {
  border-top: 1px solid var(--border);
  padding-top: 6px;
  margin-top: 6px;
  color: oklch(0.45 0.02 100);
  font-style: italic;
}
.map-popup__link {
  display: inline-block;
  margin-top: 4px;
  font-weight: 700;
  color: var(--green);
}

.route-cards {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 40px 100px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.route-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}

.route-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 28px;
  flex-wrap: wrap;
  cursor: pointer;
  list-style: none;
}
.route-card__head::-webkit-details-marker {
  display: none;
}
.route-card__title-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
}
.route-card__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
/* The dirt-road bypass card, in place of a solid dot - mirrors the dashed
   polyline it describes on the map (and .map-legend__swatch--dashed). */
.route-card__dot--dashed {
  width: 16px;
  height: 4px;
  border-radius: 0;
  background: repeating-linear-gradient(
    90deg,
    var(--route-dot-color) 0 4px,
    transparent 4px 7px
  );
}
.route-card__title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  margin: 0;
  color: var(--green-dark);
}
.route-card__subtitle {
  font-size: 14px;
  color: oklch(0.45 0.02 100);
  margin: 4px 0 0;
}
.route-card__toggle {
  border: 1px solid var(--green);
  color: var(--green);
  font-weight: 700;
  font-size: 14px;
  padding: 10px 18px;
  border-radius: 8px;
  white-space: nowrap;
}
.route-card[open] .route-card__toggle {
  background: var(--green);
  color: #fff;
}
/* Swaps the toggle's label between "More info" and "Less info" based on
   the <details> element's own [open] state - no JS needed, matches the
   zero-JS disclosure approach the rest of this card already uses. */
.route-card__toggle-less {
  display: none;
}
.route-card[open] .route-card__toggle-more {
  display: none;
}
.route-card[open] .route-card__toggle-less {
  display: inline;
}
.route-card__body {
  padding: 20px 28px 28px;
  border-top: 1px solid oklch(0.92 0.01 90);
}
.route-card__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
}
.route-card__stat-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: oklch(0.5 0.02 100);
}
.route-card__stat-value {
  margin: 6px 0 0;
  font-size: 16px;
  font-weight: 600;
  color: oklch(0.25 0.02 100);
}
.route-card__stat--wide {
  grid-column: 1 / -1;
}
.route-card__desc {
  margin: 18px 0 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink);
}
/* The dirt-road bypass card's body - just the explanatory paragraph, no
   length/duration/condition stat grid (see route-card__desc above). */
.route-card__body--text {
  display: block;
}
.route-card__note-body {
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink);
  margin: 0;
}

/* /infrastructure - alternating image/text rows */

.infra-list {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 40px 100px;
  display: flex;
  flex-direction: column;
  gap: 72px;
}
.infra-row {
  display: flex;
  gap: 48px;
  align-items: center;
  flex-wrap: wrap;
}
.infra-row__media {
  flex: 1 1 380px;
  min-width: 300px;
  height: 320px;
  border-radius: 16px;
  overflow: hidden;
}
/* Some rows show more than one photo (the bridge has 2, kiosks has 3 -
   pavilion, fireplace, fountain) instead of a single hero image, since one
   shot cannot cover several amenities. `.gallery`'s own 5/4/3-column
   breakpoints key off viewport width, which would try to cram 2-3 photos
   into 5 columns at this element's actual (much narrower, in-row) width -
   `auto-fit` here instead, so it always shows exactly as many columns as
   photos rather than leaving empty grid cells. */
.infra-row__media--gallery {
  flex: 1 1 380px;
  min-width: 300px;
}
.infra-row__media--gallery .gallery {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}
.infra-row__media--gallery .gallery__item {
  border-radius: 12px;
}
.infra-row__media .img-slot,
.infra-row__media .img-slot--placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  background: oklch(0.93 0.02 90);
  color: oklch(0.5 0.02 100);
  font-size: 13px;
  text-align: center;
  padding: 16px;
}
.infra-row__body {
  flex: 1 1 320px;
  min-width: 280px;
}
.infra-row__tag {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.infra-row__title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  margin: 12px 0 16px;
  color: var(--green-dark);
}
.infra-row__desc {
  font-size: 16px;
  line-height: 1.75;
  color: oklch(0.34 0.02 100);
  margin: 0;
}

/* /kakogefyro */

.kako-hero {
  position: relative;
  height: 60vh;
  min-height: 420px;
  overflow: hidden;
}
.kako-hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
}
.kako-hero__media.img-slot--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, oklch(0.3 0.05 150), oklch(0.18 0.03 150));
  color: oklch(0.85 0.02 100);
  padding: 24px;
  text-align: center;
}
.kako-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, oklch(0.15 0.03 150 / 0.25) 0%, oklch(0.1 0.03 150 / 0.7) 100%);
}
.kako-hero__content {
  position: relative;
  z-index: 10;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 40px 56px;
}
.kako-hero__eyebrow {
  color: var(--gold-soft);
  font-weight: 700;
  letter-spacing: 0.14em;
  font-size: 12px;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.kako-hero__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(36px, 6vw, 64px);
  color: #fff;
  margin: 0;
  max-width: 800px;
}
.kako-body {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 64px 40px 40px;
}
.kako-body__p {
  font-size: 17px;
  line-height: 1.85;
  color: oklch(0.32 0.02 100);
  margin: 0 0 22px;
}
.kako-body__p:last-child {
  margin-bottom: 0;
}
.kako-body__source {
  margin: 28px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  font-style: italic;
  color: oklch(0.5 0.02 100);
}
.kako-body__source a {
  font-style: normal;
}
.kako-gallery {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 40px 40px;
}

/* Generic photo gallery, shared by home/routes/infrastructure/kakogefyro -
   see components/gallery.dart. Tiles are <button> elements (not <a>/<img>
   directly) so they open the lightbox instead of navigating. */
.section--gallery {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 40px 64px;
}
.section--gallery__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  margin-bottom: 24px;
}
/* 5 columns down to 3 as the viewport narrows - explicit counts, not
   auto-fit/minmax, which collapses to 1 column once the container is
   narrower than the minmax floor (e.g. on phones). Tiles shrink to fit
   instead of the column count dropping. */
.gallery {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}
.gallery__item {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  padding: 0;
  border: none;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  background: oklch(0.93 0.02 90);
}
@media (max-width: 900px) {
  .gallery {
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
  }
}
@media (max-width: 640px) {
  .gallery {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    border-radius: 8px;
  }
}
.gallery__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.25s ease;
}
.gallery__item:hover .gallery__img,
.gallery__item:focus-visible .gallery__img {
  transform: scale(1.05);
}
.gallery__item:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

/* Full-page photo carousel - see web/js/lightbox.js. */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  background: oklch(0.1 0 0 / 0.92);
}
.lightbox.lightbox--open {
  display: flex;
}
.lightbox__figure {
  margin: 0;
  max-width: min(92vw, 1200px);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.lightbox__img {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 8px;
}
.lightbox__counter {
  color: oklch(0.9 0.01 100);
  font-size: 13px;
  letter-spacing: 0.04em;
}
.lightbox__close,
.lightbox__prev,
.lightbox__next {
  position: absolute;
  border: none;
  background: oklch(1 0 0 / 0.1);
  color: #fff;
  cursor: pointer;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}
.lightbox__close:hover,
.lightbox__prev:hover,
.lightbox__next:hover {
  background: oklch(1 0 0 / 0.2);
}
.lightbox__close {
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  font-size: 26px;
  line-height: 1;
}
.lightbox__prev,
.lightbox__next {
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  font-size: 32px;
  line-height: 1;
}
.lightbox__prev {
  left: 20px;
}
.lightbox__next {
  right: 20px;
}
@media (max-width: 640px) {
  .lightbox__close {
    top: 12px;
    right: 12px;
    width: 38px;
    height: 38px;
  }
  .lightbox__prev,
  .lightbox__next {
    width: 42px;
    height: 42px;
  }
  .lightbox__prev {
    left: 8px;
  }
  .lightbox__next {
    right: 8px;
  }
}
.kako-info {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 24px 40px 100px;
}
.kako-info__card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.kako-info__title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  color: var(--green-dark);
}
.kako-info__body {
  font-size: 15px;
  line-height: 1.7;
  color: oklch(0.4 0.02 100);
  margin: 0;
}

/* /villages */

.villages-tier1-section,
.villages-tier2-section {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 40px 16px;
}
.villages-tier2-section {
  padding: 40px 40px 100px;
}
.villages-tier__label {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--green-dark);
  margin: 0 0 20px;
}
.villages-tier1 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
}
.villages-tier1__card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.villages-tier1__card:hover {
  transform: translateY(-3px);
  border-color: oklch(0.75 0.03 90);
  box-shadow: 0 10px 24px oklch(0.2 0.03 150 / 0.12);
}
.villages-tier1__media {
  height: 200px;
}
.villages-tier1__media .img-slot,
.villages-tier1__media .img-slot--placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  background: oklch(0.93 0.02 90);
  color: oklch(0.5 0.02 100);
  font-size: 13px;
  text-align: center;
  padding: 16px;
}
.villages-tier1__body {
  padding: 22px 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.villages-tier1__name {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  margin: 0;
  color: var(--green-dark);
}
.villages-tier1__desc {
  font-size: 14px;
  line-height: 1.6;
  color: oklch(0.42 0.02 100);
  margin: 0;
}
.villages-tier1__link {
  align-self: flex-start;
  margin-top: 6px;
  padding: 10px 18px;
  font-size: 14px;
  background: var(--green);
  color: #fff;
  text-decoration: none;
}
.villages-tier2 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}
/* Name-only tiles, no photos - see the note in villages_page.dart. */
.villages-tier2__card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 22px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 84px;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  /* A few of these render as <a> (villages with their own site) rather than
     <div> - reset link styling so both look identical. */
  text-decoration: none;
  color: inherit;
}
.villages-tier2__card:hover {
  transform: translateY(-2px);
  border-color: oklch(0.75 0.03 90);
  box-shadow: 0 6px 16px oklch(0.2 0.03 150 / 0.1);
}
.villages-tier2__name {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  margin: 0;
  color: oklch(0.25 0.02 100);
}

/* /guides */

.guides-listings {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 40px 20px;
}

/* Visually hidden but still announced - the <fieldset><legend> the filter
   pills need for accessibility, without duplicating the "All" pill's text
   on screen. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.guides-categories {
  display: flex;
  flex-direction: column;
  gap: 44px;
}
/* Category title (+ optional count) on the left, "view all" on the right,
   same row - see ServicesPage's `hasMore`/`guides_show_all`. */
.guides-category__heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 18px;
}
.guides-category__heading-main {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.guides-category__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  margin: 0;
}
.guides-category__title-link {
  color: inherit;
  text-decoration: none;
}
.guides-category__title-link:hover {
  text-decoration: underline;
}
.guides-category__count {
  font-size: 13px;
  font-weight: 600;
  color: oklch(0.5 0.02 100);
}
/* Fixed (not auto-fit) tracks with justify-content: start, so a category
   with only 1-2 real listings shows 1-2 modestly-sized cards left-aligned
   instead of stretching them to fill a full-width row. The exact column
   count (1-3) is set inline per-section by ServicesPage based on how many
   cards are actually shown - see guides_page's `columns` calculation. */
.guides-category__grid {
  display: grid;
  justify-content: start;
  gap: 24px;
}
.guides-category__more {
  display: inline-block;
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--green);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.guides-category__more:hover {
  color: var(--green-dark);
}
.guides-empty {
  background: oklch(0.97 0.01 90);
  border: 1px dashed var(--border);
  border-radius: 14px;
  padding: 28px 24px;
  text-align: center;
}
.guides-empty__text {
  margin: 0 0 10px;
  color: oklch(0.45 0.02 100);
  font-size: 14px;
}
.guides-empty__link {
  font-size: 14px;
  font-weight: 600;
  color: var(--green);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.guides-empty__link:hover {
  color: var(--green-dark);
}
.guide-card {
  text-decoration: none;
  color: inherit;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
}
.guide-card:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.guide-card__media {
  height: 170px;
}
.guide-card__media .img-slot,
.guide-card__media .img-slot--placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  background: oklch(0.93 0.02 90);
  color: oklch(0.5 0.02 100);
  font-size: 12px;
  text-align: center;
  padding: 12px;
}
.guide-card__body {
  padding: 20px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.guide-card__cat {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.guide-card__name {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  color: var(--green-dark);
}
.guide-card__desc {
  font-size: 14px;
  line-height: 1.55;
  color: oklch(0.42 0.02 100);
  margin: 0;
}
.guide-card__hours {
  font-size: 13px;
  line-height: 1.5;
  color: oklch(0.45 0.02 100);
  margin: 0;
}
.guide-card__phones {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.guide-card__phone {
  font-size: 14px;
  font-weight: 700;
  color: var(--green-dark);
  text-decoration: none;
}
.guide-card__phone:hover {
  text-decoration: underline;
}
.guides-advertise {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: 64px 40px 100px;
}
.guides-advertise__card {
  background: var(--green);
  border-radius: 20px;
  padding: 44px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.guides-advertise__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 26px;
  color: #fff;
  margin: 0 0 10px;
}
.guides-advertise__body {
  font-size: 15px;
  line-height: 1.7;
  color: oklch(0.92 0.02 150);
  margin: 0;
}
.guides-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* Anti-spam honeypot (see components/contact_form_guards.dart) - moved
   off-screen rather than display:none/visibility:hidden, which some bots
   specifically check for and skip. */
.contact-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.guides-form__row {
  display: grid;
  gap: 14px;
}
.guides-form__row--two {
  grid-template-columns: 1fr 1fr;
}
.guides-form__field {
  padding: 13px 14px;
  border-radius: 8px;
  border: none;
  font-size: 14px;
  font-family: inherit;
  background: #fff;
  color: var(--ink);
}
.guides-form__field--message {
  resize: vertical;
  min-height: 96px;
}
.guides-form__submit {
  align-self: flex-start;
  padding: 14px 28px;
  border: none;
  cursor: pointer;
}
.guides-form__note {
  font-size: 13px;
  color: oklch(0.85 0.02 150);
  margin: 0;
}
.guides-form__banner {
  padding: 14px 18px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 20px;
}
.guides-form__banner--ok {
  background: oklch(0.36 0.08 150 / 0.25);
  color: #fff;
  border: 1px solid oklch(0.5 0.1 150 / 0.5);
}
.guides-form__banner--error {
  background: oklch(0.5 0.15 30 / 0.25);
  color: #fff;
  border: 1px solid oklch(0.6 0.15 30 / 0.5);
}
.guide-card__link {
  font-size: 13px;
  font-weight: 600;
  color: var(--green);
  text-decoration: none;
  word-break: break-all;
}
.guide-card__link:hover {
  text-decoration: underline;
}

/* /services/{category}/{id} - one listing's full detail page. */
.service-detail {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 40px 64px;
}
.service-detail__back {
  display: inline-block;
  margin-bottom: 24px;
  font-size: 14px;
  font-weight: 600;
  color: var(--green);
  text-decoration: none;
}
.service-detail__back:hover {
  text-decoration: underline;
}
.service-detail__gallery {
  margin-bottom: 32px;
}
.service-detail__info {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.service-detail__row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.service-detail__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: oklch(0.5 0.02 100);
}

@media (max-width: 520px) {
  .guides-form__row--two {
    grid-template-columns: 1fr;
  }
  .page-header {
    padding: 56px 20px 20px;
  }
  .routes-map,
  .route-cards,
  .infra-list,
  .kako-body,
  .kako-gallery,
  .kako-info,
  .villages-tier1-section,
  .villages-tier2-section,
  .guides-listings,
  .guides-advertise,
  .service-detail {
    padding-left: 20px;
    padding-right: 20px;
  }
  .infra-row {
    gap: 24px;
  }
  .kako-hero__content {
    padding: 0 20px 32px;
  }
  .guides-advertise__card {
    padding: 28px;
  }
}

@media (max-width: 640px) {
  .nav {
    padding: 12px 20px;
  }
  .section--intro,
  .cards-grid,
  .reviews {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* Skeleton shimmer for content photos - web/js/img-loading.js toggles
   `.img--loading` based on the image's real load state (falls back to
   staying on forever if JS is disabled, which just reads as a subtle
   texture rather than breaking anything). Every wrapper this applies to
   (.card__media, .gallery__item, .kako-hero, ...) already gives the <img>
   an explicit box size before it loads, so the shimmer has something to
   fill. */
/* The shimmer itself lives on the *parent* of the loading <img>, not the
   img - opacity affects a whole box uniformly, so putting both the shimmer
   background and the fade-in on the same element would hide one whenever
   the other is meant to show. The photo fades in (opacity 0 -> 1) over
   whatever is behind it, which is this shimmer, right up until the
   `.img--loading` class comes off. */
/* Default (no-JS fallback) is fully visible - the hide-and-shimmer state
   below only ever applies once `js` lands on <html>, which happens via a
   blocking inline script before the parser reaches any image (see
   main.server.dart). That is also what makes the shimmer reliably visible
   regardless of how fast an image loads or where it sits on the page: it
   starts hidden from first paint and only reveals once img-loading.js
   confirms that *specific* image is done, rather than only checking once at
   DOMContentLoaded (by which point early-page images have often already
   finished, and would skip the shimmer purely from a head start on
   fetching, not because anything was slow). */
html.js :has(> img[data-shimmer]:not(.img--loaded)) {
  background: linear-gradient(100deg, oklch(0.93 0.02 90) 30%, oklch(0.97 0.01 90) 50%, oklch(0.93 0.02 90) 70%);
  background-size: 200% 100%;
  animation: img-shimmer 1.6s ease-in-out infinite;
}
img[data-shimmer] {
  background-color: oklch(0.93 0.02 90);
  transition: opacity 0.35s ease;
}
html.js img[data-shimmer] {
  opacity: 0;
}
html.js img[data-shimmer].img--loaded {
  opacity: 1;
}
@keyframes img-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  html.js :has(> img[data-shimmer]:not(.img--loaded)) {
    animation: none;
  }
}