*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}

:root {
  /* Turquoise base (Vishuddha) with the logo's gold as the accent */
  --aqua: #17a2a8;
  --aqua-d: #0e6e75;
  --aqua-br: #2ed9ce;
  --aqua-l: #ddf2f2;
  --aqua-xl: #f0faf9;

  /* pulled straight from logo.png */
  --gold: #f5cf3d;
  --gold-d: #e0b520;
  --navy: #123b4f;

  --deep: #0a4d54;
  --shell: #f5fafa;
  --shell-d: #e5f1f1;
  --line: #d3e6e6;
  --ink: #12313c;
  --ink-2: #4d666f;
  --ink-3: #8aa3a8;
  --white: #fff;
  --sh-1: 0 1px 3px rgba(18, 59, 79, .07);
  --sh-2: 0 4px 20px rgba(18, 59, 79, .11);
  --sh-3: 0 14px 48px rgba(18, 59, 79, .2);
  --r-s: 10px;
  --r-m: 14px;
  --r-l: 20px;
  --r-xl: 26px;
  --ease: cubic-bezier(.4, 0, .2, 1);
  --spring: cubic-bezier(.34, 1.4, .5, 1);
  --head: 72px;
  --bar: 60px;
}

html,
body {
  height: 100%;
  overflow: hidden
}

/* Document pages (profile, legal, contact) scroll normally.
   The map page keeps overflow:hidden so it can fill the viewport.
   This must sit on <html>, not <body> — a body rule alone cannot
   re-enable scrolling once html is clipped. */
html.doc,
html.doc body {
  height: auto;
  overflow: visible
}

body {
  font-family: Inter, sans-serif;
  background: var(--shell);
  background-image:
    radial-gradient(900px 500px at 12% -8%, rgba(23, 162, 168, .09), transparent 62%),
    radial-gradient(700px 420px at 96% 4%, rgba(245, 207, 61, .10), transparent 60%);
  background-attachment: fixed;
  color: var(--ink);
  -webkit-font-smoothing: antialiased
}

/* ══ HEADER ══ */
header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--head);
  z-index: 1200;
  background: rgba(250, 247, 242, .88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none
}

.brand-mark {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center
}

.brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block
}

.brand-mark svg {
  width: 19px;
  height: 19px;
  fill: #fff
}

.brand-name {
  font-family: Fraunces, serif;
  color: var(--navy);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -.022em;
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 1.1;
  color: var(--ink)
}

.brand-sub {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 1px
}

.lang {
  display: flex;
  gap: 2px;
  background: var(--shell-d);
  padding: 3px;
  border-radius: 99px
}

.lang button {
  padding: 6px 15px;
  border: 0;
  border-radius: 99px;
  cursor: pointer;
  font: 500 12.5px Inter, sans-serif;
  letter-spacing: .03em;
  background: transparent;
  color: var(--ink-2);
  transition: all .2s var(--ease)
}

.lang button.on {
  background: var(--white);
  color: var(--aqua-d);
  box-shadow: var(--sh-1)
}

/* ══ FILTER BAR ══ */
#bar {
  position: fixed;
  top: var(--head);
  left: 0;
  right: 0;
  height: var(--bar);
  z-index: 1150;
  background: rgba(250, 247, 242, .88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 28px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none
}

#bar::-webkit-scrollbar {
  display: none
}

.search {
  position: relative;
  flex-shrink: 0;
  width: 260px
}

.search svg {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  stroke: var(--ink-3);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  pointer-events: none
}

.search input {
  width: 100%;
  padding: 10px 13px 10px 37px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-m);
  background: var(--white);
  font: 400 13.5px Inter, sans-serif;
  color: var(--ink);
  outline: none;
  transition: all .2s var(--ease)
}

.search input:focus {
  border-color: var(--aqua);
  box-shadow: 0 0 0 3.5px rgba(23, 162, 168, .16)
}

.search input::placeholder {
  color: var(--ink-3)
}

select {
  flex-shrink: 0;
  padding: 10px 32px 10px 14px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-m);
  background: var(--white);
  font: 400 13.5px Inter, sans-serif;
  color: var(--ink);
  outline: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%2355696b' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  transition: all .2s var(--ease)
}

select:focus {
  border-color: var(--aqua);
  box-shadow: 0 0 0 3.5px rgba(23, 162, 168, .16)
}

select.active {
  border-color: var(--aqua);
  background-color: var(--aqua-xl);
  color: var(--aqua-d);
  font-weight: 500
}

#clear {
  flex-shrink: 0;
  padding: 10px 14px;
  border: 0;
  border-radius: var(--r-m);
  cursor: pointer;
  background: transparent;
  color: var(--ink-3);
  font: 500 13px Inter, sans-serif;
  transition: all .2s var(--ease);
  display: none;
  white-space: nowrap
}

#clear:hover {
  color: var(--deep);
  background: var(--aqua-l)
}

#clear.show {
  display: block
}

.bar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
  padding-left: 14px
}

#count {
  font-size: 13px;
  color: var(--ink-3);
  white-space: nowrap
}

#count b {
  color: var(--aqua-d);
  font-weight: 600
}

.viewtog {
  display: flex;
  gap: 2px;
  background: var(--shell-d);
  padding: 3px;
  border-radius: var(--r-m)
}

.viewtog button {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 0;
  border-radius: 11px;
  cursor: pointer;
  font: 500 12.5px Inter, sans-serif;
  background: transparent;
  color: var(--ink-2);
  transition: all .2s var(--ease);
  white-space: nowrap
}

.viewtog button svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round
}

.viewtog button.on {
  background: var(--white);
  color: var(--aqua-d);
  box-shadow: var(--sh-1)
}

/* ══ STAGE ══ */
#stage {
  position: fixed;
  top: calc(var(--head) + var(--bar));
  left: 0;
  right: 0;
  bottom: 0
}

#map {
  width: 100%;
  height: 100%
}

.leaflet-container {
  background: #dfeded;
  font-family: Inter, sans-serif
}

/* Nudge the basemap toward the brand so the map and the UI read as
   one surface instead of two. Applied to the tile pane only — it
   costs no extra requests and does not affect load time. */
.leaflet-tile-pane {
  filter: saturate(.62) hue-rotate(-8deg) brightness(1.03)
}

/* ══ LIST VIEW ══ */
#list {
  display: none;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  padding: 26px 28px 60px;
  background: var(--shell)
}

#list.on {
  display: block
}

#stage.list-mode #map {
  display: none
}

.grid {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 18px
}

/* ══ INITIALS AVATAR ══
   Shown whenever a therapist has no photo. Colour is derived
   from the name in data.js, so it stays consistent per person. */
.avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: Fraunces, serif;
  font-weight: 500;
  letter-spacing: .01em;
  user-select: none
}

.lc-photo.avatar {
  font-size: 22px
}

.lcard {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  padding: 20px;
  cursor: pointer;
  transition: all .22s var(--ease);
  display: flex;
  flex-direction: column;
  gap: 13px;
  text-decoration: none;
  color: inherit
}

.lcard:hover {
  border-color: var(--aqua);
  box-shadow: var(--sh-2);
  transform: translateY(-3px)
}

.lc-top {
  display: flex;
  gap: 14px;
  align-items: flex-start
}

.lc-photo {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--aqua-l);
  border: 2px solid var(--white);
  box-shadow: var(--sh-1)
}

.lc-ph {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  flex-shrink: 0;
  background: var(--aqua-l);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px
}

.lc-name {
  font-family: Fraunces, serif;
  font-size: 17.5px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.01em;
  margin-bottom: 3px
}

.lc-qual {
  font-size: 12px;
  color: var(--aqua-d);
  font-weight: 500;
  line-height: 1.4
}

.lc-loc {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  color: var(--ink-3);
  margin-top: 5px
}

.lc-loc svg {
  width: 12px;
  height: 12px;
  stroke: var(--ink-3);
  fill: none;
  stroke-width: 2;
  flex-shrink: 0
}

.lc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px
}

.lc-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--shell-d)
}

.lc-price {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink)
}

.lc-more {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--aqua-d)
}

/* chips */
.chip {
  padding: 4px 10px;
  border-radius: 99px;
  font-size: 11.5px;
  font-weight: 500;
  background: var(--aqua-l);
  color: var(--aqua-d);
  white-space: nowrap
}

.chip-clay {
  background: var(--aqua-l);
  color: #9c5f43
}

.chip-out {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-2)
}

/* ══ MARKER ══ */
/* ══ MAP PIN ══
   Concentric rings rather than a teardrop: a solid core with a
   soft halo. Selected switches to the logo's gold and sends one
   slow ripple outward. Only transform/opacity animate, so it
   stays on the GPU and costs nothing at load. */
.pin {
  position: relative;
  width: 34px;
  height: 34px;
  cursor: pointer;
  animation: pin-in .45s var(--spring) both
}

/* halo */
.pin::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(23, 162, 168, .18);
  border: 1.5px solid rgba(23, 162, 168, .38);
  transition: all .26s var(--ease)
}

/* core */
.pin::after {
  content: '';
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--aqua-br) 0%, var(--aqua-d) 100%);
  box-shadow: 0 0 0 2.5px #fff, 0 3px 9px rgba(14, 110, 117, .45);
  transition: all .26s var(--spring)
}

@keyframes pin-in {
  from { opacity: 0; transform: scale(.4) }
  to { opacity: 1; transform: scale(1) }
}

.pin:hover::before {
  background: rgba(23, 162, 168, .26);
  transform: scale(1.14)
}

.pin:hover::after {
  inset: 8px
}

/* ── selected ── */
.pin.sel {
  z-index: 600
}

.pin.sel::before {
  background: rgba(245, 207, 61, .26);
  border-color: rgba(224, 181, 32, .6);
  transform: scale(1.2)
}

.pin.sel::after {
  inset: 7px;
  background: linear-gradient(145deg, var(--gold) 0%, var(--gold-d) 100%);
  box-shadow: 0 0 0 3px #fff, 0 4px 14px rgba(224, 181, 32, .6)
}

/* one slow ripple, so the open therapist is findable at a glance */
.pin.sel .ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--gold);
  opacity: 0;
  animation: ripple 2.6s var(--ease) infinite
}

@keyframes ripple {
  0% { transform: scale(.72); opacity: .7 }
  75%, 100% { transform: scale(2.1); opacity: 0 }
}

@media (prefers-reduced-motion: reduce) {
  .pin, .pin.sel .ring { animation: none }
  .pin { opacity: 1 }
}

.marker-cluster div {
  background: var(--aqua) !important;
  color: #fff !important;
  font: 600 13px Inter, sans-serif !important
}

.marker-cluster {
  background: rgba(23, 162, 168, .26) !important
}

.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
  display: none
}

/* ══ DETAIL PANEL (teaser) ══
   Deliberately compact: avatar, name, location, badges, button.
   Everything else lives on the profile page. */
#panel {
  position: fixed;
  right: 22px;
  top: calc(var(--head) + var(--bar) + 18px);
  width: 330px;
  z-index: 1300;
  background: rgba(255, 255, 255, .93);
  backdrop-filter: blur(18px) saturate(1.25);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-3);
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transform: translateX(18px) scale(.97);
  transition: opacity .3s var(--ease), transform .38s var(--spring)
}

#panel.on {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0) scale(1)
}

#pclose {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  background: var(--shell);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-3);
  font-size: 13px;
  transition: all .2s var(--ease)
}

#pclose:hover {
  background: var(--shell-d);
  color: var(--ink);
  transform: rotate(90deg)
}

#ptop {
  display: flex;
  gap: 14px;
  align-items: center;
  padding-right: 26px
}

.p-photo {
  width: 62px;
  height: 62px;
  border-radius: 18px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--aqua-l);
  box-shadow: var(--sh-1)
}

.p-photo.avatar {
  font-size: 23px
}

#pname {
  font-family: Fraunces, serif;
  color: var(--navy);
  font-size: 20.5px;
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -.022em;
  margin-bottom: 4px
}

#ploc {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.4
}

#ploc svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  stroke: var(--aqua);
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round
}

#pbadges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 14px
}

.bdg {
  padding: 4px 10px;
  border-radius: 99px;
  font: 600 10px Inter, sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff
}

.bdg-s { background: var(--aqua) }
.bdg-c { background: var(--deep) }
.bdg-b { background: #3d8f9c }

.bdg-o {
  background: var(--shell);
  color: var(--ink-2);
  border: 1px solid var(--line)
}

/* Trimmed to three lines — the full text is on the profile page */
#pintro {
  margin-top: 13px;
  font-size: 13px;
  line-height: 1.62;
  color: var(--ink-2);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden
}

#pcta {
  display: block;
  width: 100%;
  padding: 12px;
  margin-top: 16px;
  border-radius: var(--r-m);
  text-align: center;
  background: linear-gradient(140deg, var(--aqua) 0%, var(--aqua-d) 100%);
  color: #fff;
  font: 600 13.5px Inter, sans-serif;
  text-decoration: none;
  transition: all .2s var(--ease);
  box-shadow: 0 2px 10px rgba(14, 110, 117, .28)
}

#pcta:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(14, 110, 117, .38)
}

/* ══ STATES ══ */
.overlay {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1100;
  text-align: center;
  pointer-events: none;
  display: none
}

.overlay.on {
  display: block
}

.obox {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  padding: 28px 38px;
  box-shadow: var(--sh-2)
}

.oicon {
  font-size: 32px;
  margin-bottom: 10px
}

.otitle {
  font-family: Fraunces, serif;
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 5px
}

.osub {
  font-size: 13.5px;
  color: var(--ink-3)
}

.spin {
  width: 28px;
  height: 28px;
  margin: 0 auto 12px;
  border-radius: 50%;
  border: 2.5px solid var(--aqua-l);
  border-top-color: var(--aqua);
  animation: sp .7s linear infinite
}

@keyframes sp {
  to {
    transform: rotate(360deg)
  }
}

/* ══ MOBILE ══ */
@media (max-width:860px) {
  :root {
    --head: 62px;
    --bar: 56px
  }

  header {
    padding: 0 16px
  }

  .brand-sub {
    display: none
  }

  #bar {
    padding: 0 16px;
    gap: 8px
  }

  .search {
    width: 190px
  }

  .bar-right {
    padding-left: 8px
  }

  #count {
    display: none
  }

  .viewtog button span {
    display: none
  }

  .viewtog button {
    padding: 8px 12px
  }

  #list {
    padding: 18px 16px 50px
  }

  .grid {
    grid-template-columns: 1fr;
    gap: 14px
  }

  #panel {
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    width: 100%;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    max-height: 88vh;
    transform: translateY(100%);
    border-bottom: 0
  }

  #panel.on {
    transform: translateY(0)
  }

  
}
  
/* ═══════════════════════════════════════════════════════════════
   PROFILE PAGE  (therapist.html)
   ═══════════════════════════════════════════════════════════════ */

body.profile {
  height: auto;
  overflow: auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column
}

body.profile header {
  position: sticky
}

.pf-main {
  flex: 1
}

.backwrap {
  max-width: 780px;
  margin: 0 auto;
  padding: 22px 28px 0
}

.back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: 500 13.5px Inter, sans-serif;
  color: var(--ink-2);
  text-decoration: none;
  padding: 8px 15px 8px 11px;
  border-radius: 99px;
  background: var(--white);
  border: 1px solid var(--line);
  transition: all .2s var(--ease)
}

.back:hover {
  color: var(--aqua-d);
  border-color: var(--aqua);
  transform: translateX(-2px)
}

.back svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round
}

.wrap {
  max-width: 780px;
  margin: 0 auto;
  padding: 26px 28px 80px
}

.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-2);
  overflow: hidden
}

.hero {
  padding: 38px 38px 32px;
  background:
    radial-gradient(520px 260px at 88% -30%, rgba(245, 207, 61, .16), transparent 68%),
    linear-gradient(165deg, var(--aqua-xl) 0%, var(--white) 74%);
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 26px;
  align-items: center
}

.hero-photo {
  width: 112px;
  height: 112px;
  border-radius: 26px;
  flex-shrink: 0;
  object-fit: cover;
  background: var(--aqua-l);
  box-shadow: var(--sh-2);
  border: 3px solid var(--white)
}

.hero-photo.avatar {
  font-size: 38px
}

.hero-txt {
  flex: 1;
  min-width: 0
}

.hero h1 {
  font-family: Fraunces, serif;
  color: var(--navy);
  font-size: 36px;
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.03em;
  margin-bottom: 12px
}

.hero .badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px
}

.pf-body {
  padding: 32px 38px 38px
}

.pf-body section {
  margin-bottom: 30px
}

.pf-body section:last-child {
  margin-bottom: 0
}

.lab {
  font: 600 10.5px Inter, sans-serif;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 13px
}

.intro {
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--ink-2);
  white-space: pre-wrap
}

.info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2px
}

.row {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  padding: 13px 15px;
  border-radius: var(--r-m);
  transition: background .18s var(--ease)
}

.row:hover {
  background: var(--aqua-xl)
}

.row.wide {
  grid-column: 1 / -1
}

.ico {
  width: 36px;
  height: 36px;
  border-radius: var(--r-s);
  background: var(--aqua-l);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0
}

.ico svg {
  width: 16px;
  height: 16px;
  stroke: var(--aqua-d);
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round
}

.rlab {
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 3px
}

.rval {
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.45;
  word-break: break-word
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px
}

.chip-lg {
  font-size: 12.5px;
  font-weight: 500;
  padding: 7px 14px;
  border-radius: 99px;
  background: var(--aqua-l);
  color: var(--aqua-d)
}

/* page-level states */
.state {
  max-width: 780px;
  margin: 90px auto;
  text-align: center;
  padding: 0 28px
}

.state-ico {
  font-size: 38px;
  margin-bottom: 14px
}

.state-t {
  font-family: Fraunces, serif;
  font-size: 21px;
  font-weight: 500;
  margin-bottom: 8px
}

.state-s {
  font-size: 14.5px;
  color: var(--ink-3);
  line-height: 1.6;
  max-width: 440px;
  margin: 0 auto 22px
}

.hidden {
  display: none !important
}

@media (max-width:860px) {
  .backwrap {
    padding: 16px 16px 0
  }

  .wrap {
    padding: 18px 16px 50px
  }

  .hero {
    padding: 26px 22px 24px;
    flex-direction: column;
    gap: 18px;
    text-align: center
  }

  .hero-photo {
    width: 94px;
    height: 94px
  }

  .hero-photo.avatar {
    font-size: 32px
  }

  .hero .badges {
    justify-content: center
  }

  .hero h1 {
    font-size: 25px
  }

  .pf-body {
    padding: 26px 22px 30px
  }

  .info {
    grid-template-columns: 1fr
  }
}

/* ═══════════════════════════════════════════════════════════════
   MOTION
   Transform and opacity only, so every animation runs on the GPU.
   No extra files, no extra requests — load time is unchanged.
   ═══════════════════════════════════════════════════════════════ */

@keyframes rise {
  from { opacity: 0; transform: translateY(14px) }
  to { opacity: 1; transform: none }
}

/* List cards fade up in sequence. The delay is capped at the first
   ten so a long list never feels like it is waiting to finish. */
.lcard {
  animation: rise .42s var(--ease) both
}

.lcard:nth-child(1)  { animation-delay: .02s }
.lcard:nth-child(2)  { animation-delay: .05s }
.lcard:nth-child(3)  { animation-delay: .08s }
.lcard:nth-child(4)  { animation-delay: .11s }
.lcard:nth-child(5)  { animation-delay: .14s }
.lcard:nth-child(6)  { animation-delay: .17s }
.lcard:nth-child(7)  { animation-delay: .19s }
.lcard:nth-child(8)  { animation-delay: .21s }
.lcard:nth-child(9)  { animation-delay: .23s }
.lcard:nth-child(n+10) { animation-delay: .25s }

.lcard:hover {
  transform: translateY(-3px)
}

/* Profile page card settles in on load */
.card {
  animation: rise .5s var(--ease) both
}

/* Gold underline that grows on hover — small, but it makes the
   cards feel built rather than templated. */
.lc-more {
  position: relative
}

.lc-more::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -3px;
  height: 1.5px;
  width: 0;
  background: var(--gold);
  transition: width .28s var(--ease)
}

.lcard:hover .lc-more::after {
  width: 100%
}

/* Buttons lift rather than just changing colour */
#pcta:active {
  transform: translateY(0) scale(.985)
}

/* Anyone who has asked their system for less motion gets none */
@media (prefers-reduced-motion: reduce) {
  .lcard,
  .card {
    animation: none
  }

  .lcard:hover {
    transform: none
  }

  * {
    scroll-behavior: auto !important
  }
}

/* ═══════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════ */

#list footer,
.site-footer {
  border-top: 1px solid var(--line);
  text-align: center;
  font-size: 12.5px;
  color: var(--ink-3);
  line-height: 1.9
}

#list footer {
  margin-top: 44px;
  padding: 26px 0 14px
}

.site-footer {
  background: var(--shell-d);
  padding: 30px 28px
}

.flinks {
  margin-top: 3px
}

#list footer a,
.site-footer a {
  color: var(--ink-2);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  transition: all .18s var(--ease)
}

#list footer a:hover,
.site-footer a:hover {
  color: var(--aqua-d);
  border-bottom-color: var(--gold)
}

/* ═══════════════════════════════════════════════════════════════
   LEGAL PAGES  (impresszum, adatvedelem)
   ═══════════════════════════════════════════════════════════════ */

.legal {
  max-width: 720px
}

.legal h1 {
  font-family: Fraunces, serif;
  color: var(--navy);
  font-size: 34px;
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.028em;
  margin: 8px 0 22px
}

.legal .lead {
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-2);
  padding: 18px 22px;
  background: var(--aqua-xl);
  border-left: 3px solid var(--aqua);
  border-radius: 0 var(--r-m) var(--r-m) 0;
  margin-bottom: 34px
}

.legal section {
  margin-bottom: 34px
}

.legal .lab {
  font: 600 11px Inter, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--aqua-d);
  margin-bottom: 14px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--line)
}

.legal p {
  font-size: 14.8px;
  line-height: 1.75;
  color: var(--ink-2);
  margin-bottom: 13px
}

.legal p:last-child {
  margin-bottom: 0
}

.legal strong {
  color: var(--ink);
  font-weight: 600
}

.legal ul {
  margin: 0 0 14px;
  padding-left: 20px
}

.legal li {
  font-size: 14.8px;
  line-height: 1.7;
  color: var(--ink-2);
  margin-bottom: 7px
}

.legal a {
  color: var(--aqua-d);
  text-decoration: none;
  border-bottom: 1px solid var(--aqua-l);
  transition: border-color .18s var(--ease)
}

.legal a:hover {
  border-bottom-color: var(--gold)
}

/* definition lists for the structured blocks */
.deflist {
  display: grid;
  grid-template-columns: minmax(120px, 180px) 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  overflow: hidden;
  margin-bottom: 15px
}

.deflist dt {
  background: var(--aqua-xl);
  padding: 12px 15px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-2)
}

.deflist dd {
  background: var(--white);
  padding: 12px 15px;
  font-size: 14px;
  color: var(--ink);
  margin: 0;
  word-break: break-word
}

.legal .updated {
  margin-top: 40px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--ink-3)
}

@media (max-width:860px) {
  .legal h1 {
    font-size: 27px
  }

  .deflist {
    grid-template-columns: 1fr;
    gap: 0
  }

  .deflist dt {
    padding-bottom: 4px
  }

  .deflist dd {
    padding-top: 4px;
    border-bottom: 1px solid var(--line)
  }
}

/* ═══════════════════════════════════════════════════════════════
   LEGAL PAGE EXTRAS
   ═══════════════════════════════════════════════════════════════ */

.legal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap
}

.legal-head h1 {
  margin-bottom: 0
}

.dlbtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-top: 12px;
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--white);
  color: var(--ink-2);
  font: 500 13px Inter, sans-serif;
  cursor: pointer;
  transition: all .2s var(--ease)
}

.dlbtn:hover {
  border-color: var(--aqua);
  color: var(--aqua-d);
  box-shadow: var(--sh-1);
  transform: translateY(-1px)
}

.dlbtn svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round
}

.legal h1 {
  margin-bottom: 22px
}

/* ═══════════════════════════════════════════════════════════════
   CONTACT
   ═══════════════════════════════════════════════════════════════ */

.mailbtn {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 34px;
  padding: 15px 26px;
  border-radius: var(--r-m);
  background: linear-gradient(140deg, var(--aqua) 0%, var(--aqua-d) 100%);
  color: #fff;
  font: 600 15px Inter, sans-serif;
  text-decoration: none;
  border: 0;
  box-shadow: 0 2px 12px rgba(14, 110, 117, .26);
  transition: all .2s var(--ease)
}

.mailbtn:hover {
  transform: translateY(-2px);
  box-shadow: 0 7px 22px rgba(14, 110, 117, .38)
}

.mailbtn svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round
}

/* ═══════════════════════════════════════════════════════════════
   MAP-VIEW LEGAL LINKS
   The list view has a full footer at the bottom of the page. In
   map view the viewport is filled, so the same links sit quietly
   in the bottom-left corner, opposite Leaflet's own attribution.
   ═══════════════════════════════════════════════════════════════ */

#maplinks {
  position: fixed;
  left: 12px;
  bottom: 10px;
  z-index: 1250;
  display: flex;
  gap: 9px;
  align-items: center;
  padding: 6px 13px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  box-shadow: var(--sh-1);
  font-size: 11.5px;
  color: var(--ink-3)
}

#maplinks a {
  color: var(--ink-2);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: all .18s var(--ease)
}

#maplinks a:hover {
  color: var(--aqua-d);
  border-bottom-color: var(--gold)
}

@media (max-width:860px) {
  #maplinks {
    left: 10px;
    bottom: 8px;
    font-size: 10.5px;
    padding: 5px 11px;
    gap: 7px
  }

  .legal-head {
    gap: 10px
  }

  .dlbtn {
    width: 100%;
    justify-content: center
  }
}

}