/* ═══════════════════════════════════════════════════════════════════════════
   COMPONENTS
   ───────────────────────────────────────────────────────────────────────────
   Extracted from reference/dr-mogilnitskaya-site-design.html, which is the
   approved direction. Selectors stay flat and single-class on purpose: no
   element-type selector may fight a class selector (the classic `.sec` vs
   `section` padding collision). Modifiers come after base classes in source
   order and rely on that, not on !important.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── buttons ─────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 15px 28px;
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: var(--fw-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  border: 1px solid var(--navy);
  background: var(--navy);
  color: #fff;
  cursor: pointer;
  transition:
    background var(--dur-hover),
    color var(--dur-hover),
    border-color var(--dur-hover);
}
.btn:hover {
  background: transparent;
  color: var(--navy);
}
.btn .arw {
  transition: transform var(--dur-hover);
}
.btn:hover .arw {
  transform: translateX(5px);
}

.btn--ghost {
  background: transparent;
  color: var(--navy);
  border-color: var(--line);
}
.btn--ghost:hover {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}

/* Course register only. Keep bronze under ~1% of page ink — it is a signal,
   not an accent palette. */
.btn--bronze {
  background: transparent;
  color: var(--bronze);
  border-color: var(--bronze);
}
.btn--bronze:hover {
  background: var(--bronze);
  color: var(--ink);
}

.btn--light {
  background: #fff;
  color: var(--ink);
  border-color: #fff;
}
.btn--light:hover {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.45);
}

/* ── filament ────────────────────────────────────────────────────────────────
   Hair is a filament; medicine is a cross. A 1px light-blue curve that behaves
   like a strand: it emerges from BEHIND her portrait in the hero and threads
   across the page.

   Z-order is the whole trick — filament 1, portrait 2, text 3. The strands'
   starting points are hidden behind the photo, which is what makes them read as
   growing out of her hair rather than as decoration laid over the page. */

.fil {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: var(--z-filament);
}
.fil path {
  fill: none;
  stroke: var(--blue);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-dasharray: 3000;
  stroke-dashoffset: 3000;
  animation: draw var(--dur-draw) var(--ease-draw) forwards;
}
@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}
/* Opacity ladder: one strand strong, the rest atmosphere. Do not equalise. */
.fil path:nth-child(1) {
  opacity: 0.85;
  animation-delay: 0.25s;
}
.fil path:nth-child(2) {
  opacity: 0.55;
  animation-delay: 0.42s;
}
.fil path:nth-child(3) {
  opacity: 0.35;
  animation-delay: 0.6s;
}
.fil path:nth-child(4) {
  opacity: 0.3;
  animation-delay: 0.78s;
}
.fil path:nth-child(5) {
  opacity: 0.18;
  animation-delay: 0.94s;
}
.sec--dark .fil path {
  opacity: 0.3;
}
.sec--dark .fil path:nth-child(1) {
  opacity: 0.34;
}
.sec--dark .fil path:nth-child(2) {
  opacity: 0.22;
}
.sec--dark .fil path:nth-child(3) {
  opacity: 0.2;
}
.sec--dark .fil path:nth-child(4) {
  opacity: 0.14;
}

/* ── nav ─────────────────────────────────────────────────────────────────── */

.nav {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  background: rgba(251, 252, 253, 0.86);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-nav);
}
.nav.stuck {
  border-bottom-color: var(--line-soft);
}
.nav__in {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad);
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}
.nav__logo img {
  height: 34px;
  width: auto;
}
.nav__links {
  display: flex;
  gap: 32px;
  align-items: center;
}
.nav__links a {
  font-size: var(--fs-nav);
  font-weight: var(--fw-label);
  letter-spacing: var(--tr-nav);
  text-transform: uppercase;
  color: var(--muted);
  position: relative;
  padding: 6px 0;
  transition: color 0.3s;
}
.nav__links a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--blue);
  transition: width var(--dur-hover);
}
.nav__links a:hover,
.nav__links a[aria-current='page'] {
  color: var(--navy);
}
.nav__links a[aria-current='page']::after,
.nav__links a:hover::after {
  width: 100%;
}
.nav__right {
  display: flex;
  align-items: center;
  gap: 20px;
}
.nav__cta {
  font-size: var(--fs-nav);
  font-weight: var(--fw-label);
  letter-spacing: var(--tr-nav);
  text-transform: uppercase;
  border: 1px solid var(--line);
  padding: 12px 22px;
  transition: var(--dur-hover);
  white-space: nowrap;
}
.nav__cta:hover {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}

/* ── language switcher ───────────────────────────────────────────────────────
   Three items, always all three visible. A dropdown would hide from a Lithuanian
   visitor the fact that a Lithuanian version exists. */

.lang {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: var(--fs-nav);
  font-weight: var(--fw-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.lang a {
  color: var(--muted);
  padding: 6px 7px;
  transition: color 0.3s;
}
.lang a:hover {
  color: var(--navy);
}
.lang a[aria-current='true'] {
  color: var(--navy);
  border-bottom: 1px solid var(--blue);
}
.lang span {
  color: var(--line);
  font-size: 9px;
}

/* ── mobile menu ─────────────────────────────────────────────────────────── */

.burger {
  display: none;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}
.burger i {
  display: block;
  width: 20px;
  height: 1px;
  background: var(--navy);
  transition: transform var(--dur-hover), opacity var(--dur-hover);
}
.burger[aria-expanded='true'] i:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.burger[aria-expanded='true'] i:nth-child(2) {
  opacity: 0;
}
.burger[aria-expanded='true'] i:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

.drawer {
  display: none;
  border-top: 1px solid var(--line-soft);
  background: var(--paper);
  padding: 18px var(--pad) 30px;
}
.drawer.open {
  display: block;
}
.drawer a {
  display: block;
  padding: 14px 0;
  font-size: var(--fs-nav);
  font-weight: var(--fw-label);
  letter-spacing: var(--tr-nav);
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--line-soft);
}
.drawer a[aria-current='page'] {
  color: var(--navy);
}

@media (max-width: 1000px) {
  .nav__links {
    display: none;
  }
  .burger {
    display: flex;
  }
}
@media (max-width: 600px) {
  .nav__cta {
    display: none;
  }
  .nav__in {
    height: var(--nav-h-sm);
  }
}

/* ── hero ────────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  overflow: hidden;
  background: var(--paper);
}
.hero__grid {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 41%;
  align-items: stretch;
  min-height: min(88vh, 860px);
}
.hero__txt {
  position: relative;
  z-index: var(--z-text);
  padding: clamp(48px, 7vw, 110px) clamp(28px, 4vw, 56px) clamp(56px, 7vw, 110px) var(--pad);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero__name {
  font-size: var(--fs-hero);
}
.hero__name span {
  display: block;
}
.hero__name .ln2 {
  margin-left: 0.055em;
}
.hero__rule {
  width: 64px;
  height: 1px;
  background: var(--blue);
  margin: 32px 0 30px;
}
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 44px;
}
.hero__media {
  position: relative;
  z-index: var(--z-media);
}
.hero__media::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--line);
  z-index: 4;
}
.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 52% 22%;
  filter: var(--photo-filter-hero);
}
.hero__tint {
  position: absolute;
  inset: 0;
  background: var(--navy);
  opacity: var(--photo-tint-hero);
  mix-blend-mode: multiply;
}
.hero__badge {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 5;
  background: var(--paper);
  padding: 22px 28px;
  max-width: 264px;
}
.hero__badge .small {
  color: var(--muted);
  letter-spacing: var(--tr-label);
  font-size: 10px;
}
.hero__badge b {
  display: block;
  font-weight: var(--fw-body);
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--navy);
  margin-top: 7px;
  line-height: 1.5;
}

@media (max-width: 900px) {
  .hero__grid {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .hero__media {
    height: min(76vh, 560px);
    order: -1;
  }
  .hero__media::before {
    display: none;
  }
  .hero__txt {
    padding: 44px var(--pad) 60px;
  }
  .hero__badge {
    display: none;
  }
}

/* ── page header (non-home pages) ────────────────────────────────────────── */

.phead {
  position: relative;
  overflow: hidden;
  background: var(--frost);
  padding: clamp(56px, 8vw, 120px) 0 clamp(44px, 6vw, 84px);
}
.phead__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(24px, 5vw, 80px);
  align-items: end;
  position: relative;
  z-index: var(--z-text);
}
.phead__t {
  font-size: clamp(34px, 5.4vw, 72px);
  font-weight: var(--fw-display);
  line-height: 1.04;
  letter-spacing: var(--tr-display);
  margin: 0;
}
@media (max-width: 840px) {
  .phead__grid {
    grid-template-columns: 1fr;
    align-items: start;
  }
}

/* ── stat strip ──────────────────────────────────────────────────────────── */

.strip {
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  background: var(--frost);
}
.strip__in {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 26px var(--pad);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(20px, 4vw, 58px);
  font-size: var(--fs-nav);
  font-weight: var(--fw-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--muted);
}
.strip__i {
  display: flex;
  align-items: center;
  gap: 12px;
}
.strip__i b {
  font-weight: var(--fw-body);
  color: var(--navy);
  font-size: 15px;
  letter-spacing: 0.06em;
  margin-right: 9px;
}

/* ── ledger — the credentials index ──────────────────────────────────────── */

.ledger {
  border-top: 1px solid var(--line);
}
.row {
  display: grid;
  grid-template-columns: 96px 150px 1fr;
  gap: clamp(14px, 2.5vw, 40px);
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
  position: relative;
  transition: background var(--dur-nav);
}
/* The cross as a list marker, on hover only. Built from two gradients rather
   than an SVG so a row costs no extra request. */
.row::before {
  content: '';
  position: absolute;
  left: -24px;
  top: calc(50% - 5px);
  width: 11px;
  height: 11px;
  background:
    linear-gradient(var(--blue), var(--blue)) center / 1.8px 11px no-repeat,
    linear-gradient(var(--blue), var(--blue)) center / 11px 1.8px no-repeat;
  opacity: 0;
  transform: scale(0.5);
  transition:
    opacity var(--dur-hover),
    transform var(--dur-hover);
}
.row:hover::before {
  opacity: 1;
  transform: scale(1);
}
.row__y {
  font-size: var(--fs-small);
  font-weight: var(--fw-label);
  letter-spacing: 0.13em;
  color: var(--blue);
}
.row__c {
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
}
.row__t {
  font-size: clamp(15px, 1.5vw, 19px);
  font-weight: var(--fw-medium);
  line-height: 1.45;
}
.row__t em {
  display: block;
  font-style: normal;
  font-weight: var(--fw-body);
  font-size: 14px;
  color: var(--muted);
  margin-top: 5px;
  line-height: 1.6;
}
/* A scanned diploma, when one is attached. */
.row__doc {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 9px;
  font-size: 10.5px;
  font-weight: var(--fw-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue);
}
.row__doc:hover {
  color: var(--navy);
}

@media (max-width: 720px) {
  .row {
    grid-template-columns: 70px 1fr;
    gap: 10px 18px;
    padding: 20px 0;
  }
  .row__c {
    grid-column: 2;
  }
  .row__t {
    grid-column: 1 / -1;
    margin-top: 4px;
  }
  .row::before {
    display: none;
  }
}

/* ── tags — specialisation list ──────────────────────────────────────────── */

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.tags li {
  border: 1px solid var(--line);
  padding: 11px 18px;
  font-size: 12.5px;
  font-weight: var(--fw-body);
  color: var(--muted);
}

/* ── modules — numbered curriculum ───────────────────────────────────────────
   Numbering is legitimate here: a curriculum is a real sequence. */

.mods {
  position: relative;
  z-index: var(--z-text);
  margin-top: var(--sec-y-tight);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 clamp(28px, 5vw, 72px);
  border-top: 1px solid var(--line-d-soft);
}
.mod {
  display: flex;
  gap: 22px;
  padding: 26px 0;
  border-bottom: 1px solid var(--line-d-soft);
  align-items: flex-start;
}
.mod__n {
  font-size: var(--fs-nav);
  font-weight: var(--fw-label);
  letter-spacing: 0.14em;
  color: var(--bronze);
  padding-top: 5px;
  flex: 0 0 auto;
}
.mod__t {
  font-size: clamp(14.5px, 1.4vw, 17.5px);
  font-weight: var(--fw-body);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.93);
}
@media (max-width: 760px) {
  .mods {
    grid-template-columns: 1fr;
  }
}

/* ── course block ────────────────────────────────────────────────────────── */

.course__head {
  position: relative;
  z-index: var(--z-text);
  max-width: 760px;
}
.course__title {
  font-size: clamp(34px, 5.6vw, 76px);
  font-weight: var(--fw-display);
  line-height: 1.04;
  margin: 0 0 26px;
}
.course__title i {
  font-style: normal;
  color: var(--bronze);
}
.course__foot {
  position: relative;
  z-index: var(--z-text);
  margin-top: clamp(38px, 5vw, 60px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 26px 40px;
}
.course__meta {
  font-size: var(--fs-nav);
  font-weight: var(--fw-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--muted-d);
}

/* ── quote ───────────────────────────────────────────────────────────────── */

.quote {
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
}
.quote__x {
  display: flex;
  justify-content: center;
  margin-bottom: 38px;
}
.quote__x svg {
  width: 22px;
  height: 22px;
}
.quote p {
  font-family: var(--voice);
  font-style: italic;
  font-weight: var(--fw-body);
  font-size: var(--fs-quote);
  line-height: var(--lh-quote);
  letter-spacing: 0.005em;
  margin: 0;
  color: var(--navy);
}
.quote cite {
  display: block;
  margin-top: 36px;
  font-family: var(--sans);
  font-style: normal;
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-label);
  letter-spacing: var(--tr-cite);
  text-transform: uppercase;
  color: var(--muted);
}

/* ── gallery ─────────────────────────────────────────────────────────────────
   Square grid, not the asymmetric one from the concept: the before/after
   photographs are already composed as 1:1 collages, and an asymmetric grid
   built for 3:4 portraits would crop the comparison it exists to show. */

.gal {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 1.6vw, 24px);
}
.gal figure {
  margin: 0;
}
.gal button {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: var(--frost);
  cursor: zoom-in;
  position: relative;
  overflow: hidden;
  aspect-ratio: 1;
}
.gal img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: var(--photo-filter);
  transition: transform var(--dur-image) var(--ease-out);
}
.gal button:hover img {
  transform: scale(var(--photo-zoom));
}
.gal__t {
  position: absolute;
  inset: 0;
  background: var(--navy);
  opacity: var(--photo-tint);
  mix-blend-mode: multiply;
  pointer-events: none;
}
.gal figcaption {
  padding-top: 14px;
}
.gal__p {
  display: block;
  font-size: 13.5px;
  font-weight: var(--fw-medium);
  line-height: 1.45;
}
.gal__m {
  display: block;
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-label);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 6px;
}

@media (max-width: 900px) {
  .gal {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .gal {
    grid-template-columns: 1fr;
  }
}

/* A statement about consent and individual variation belongs at the top of the
   section, not in small print at the foot of the page. */
.disclaim {
  border-left: 1px solid var(--blue);
  padding: 4px 0 4px 20px;
  margin: 0 0 clamp(34px, 4vw, 54px);
  font-size: 13px;
  line-height: 1.65;
  color: var(--muted);
  max-width: 62ch;
}

/* ── lightbox ────────────────────────────────────────────────────────────── */

.lbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-lightbox);
  background: rgba(18, 41, 75, 0.94);
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 56px);
}
.lbox[open],
.lbox.open {
  display: flex;
}
.lbox img {
  max-width: 100%;
  max-height: 82vh;
  object-fit: contain;
}
.lbox__fig {
  margin: 0;
  text-align: center;
}
.lbox__cap {
  margin-top: 18px;
  font-size: var(--fs-small);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}
.lbox__x {
  position: absolute;
  top: clamp(12px, 3vw, 30px);
  right: clamp(12px, 3vw, 30px);
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: none;
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background var(--dur-hover);
}
.lbox__x:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* ── cards — courses, clinic principles ──────────────────────────────────── */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: clamp(16px, 2.4vw, 34px);
}
.card {
  border: 1px solid var(--line);
  padding: clamp(26px, 3vw, 40px);
  background: #fff;
  display: flex;
  flex-direction: column;
}
.card__n {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-label);
  letter-spacing: 0.24em;
  color: var(--blue);
  margin: 0 0 18px;
}
.card__t {
  font-size: 18px;
  font-weight: var(--fw-medium);
  line-height: 1.35;
  margin: 0 0 12px;
}
.card__d {
  font-size: 14px;
  line-height: 1.65;
  color: var(--muted);
  margin: 0;
}
.card__foot {
  margin-top: auto;
  padding-top: 26px;
}

/* Course cards live in the bronze register. */
.card--course .card__n {
  color: var(--bronze);
}

/* A course list is short — one entry today — and `auto-fit` would stretch a
   single card across the full 1320px, giving it a measure of about 150
   characters. `auto-fill` with a capped track keeps the card the same size
   whether there is one of them or four, and leaves the empty tracks empty. */
.cards--course {
  grid-template-columns: repeat(auto-fill, minmax(280px, 400px));
  justify-content: start;
}

/* ── contact ─────────────────────────────────────────────────────────────── */

.contact {
  background: var(--navy);
  color: #fff;
}
.contact__grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(36px, 6vw, 90px);
  align-items: start;
}
.contact .h2 {
  color: #fff;
}
.contact .lede {
  color: var(--muted-d);
}
@media (max-width: 840px) {
  .contact__grid {
    grid-template-columns: 1fr;
  }
}

.clist {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line-d);
}
.clist li {
  border-bottom: 1px solid var(--line-d);
}
.clist a,
.clist span.clist__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 19px 0;
  font-size: 14px;
  font-weight: var(--fw-body);
  color: rgba(255, 255, 255, 0.9);
  transition: color 0.3s;
}
.clist a:hover {
  color: var(--blue);
}
.clist .k {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-label);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  white-space: nowrap;
}

/* ── form ────────────────────────────────────────────────────────────────────
   On the navy contact field. Inputs are underlines rather than boxes: the whole
   site is hairlines, and a boxed input would be the only chrome on the page. */

.form {
  display: grid;
  gap: 26px;
}
.field {
  display: grid;
  gap: 8px;
}
.field > label {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-label);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.field input,
.field textarea,
.field select {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: var(--fw-body);
  color: #fff;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line-d);
  padding: 10px 0;
  transition: border-color var(--dur-hover);
}
.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-bottom-color: var(--blue);
}
.field textarea {
  resize: vertical;
  min-height: 96px;
  line-height: 1.6;
}
.field select option {
  color: var(--navy);
}
.field__err {
  font-size: 12px;
  color: #ffb3a6;
}

.check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--muted-d);
}
.check input {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  accent-color: var(--blue);
}
.check a {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Honeypot. Off-screen rather than display:none — some bots skip hidden fields
   but fill positioned ones, and this way it stays out of the tab order too. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.note {
  padding: 16px 20px;
  font-size: 13.5px;
  line-height: 1.6;
  border: 1px solid var(--line-d);
}
.note--ok {
  border-color: rgba(123, 174, 213, 0.5);
  color: #fff;
}
.note--err {
  border-color: rgba(255, 179, 166, 0.5);
  color: #ffb3a6;
}

/* ── map ─────────────────────────────────────────────────────────────────────
   Never an iframe: an embedded Google map sets cookies before the visitor has
   agreed to anything, which would oblige this site to carry a consent banner it
   otherwise does not need.

   And not a static tile image either. A map screenshot is a licensing question
   and one more asset to keep current, and neither buys anything the address
   plus a link does not. So: a plain field, the cross as the pin, the address in
   type, and the whole block is the link out. Nothing to 404, nothing to
   license, no third party. */

.map {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  aspect-ratio: 16 / 10;
  padding: 28px;
  text-align: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line-d);
  transition:
    background var(--dur-hover),
    border-color var(--dur-hover);
}
.map:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.32);
}
.map__pin {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  background:
    linear-gradient(var(--blue), var(--blue)) center / 3px 22px no-repeat,
    linear-gradient(var(--blue), var(--blue)) center / 22px 3px no-repeat;
}
.map__addr {
  font-size: 15px;
  font-weight: var(--fw-body);
  line-height: 1.5;
  color: #fff;
  margin: 0;
  max-width: 24ch;
}
.map__go {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-label);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

/* ── gallery filter ──────────────────────────────────────────────────────── */

.filter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: clamp(28px, 3.5vw, 48px);
}
.filter a {
  border: 1px solid var(--line);
  padding: 11px 18px;
  font-size: 12.5px;
  font-weight: var(--fw-body);
  color: var(--muted);
  transition:
    color var(--dur-hover),
    border-color var(--dur-hover);
}
.filter a:hover {
  color: var(--navy);
  border-color: var(--line);
}
.filter a[aria-current='true'] {
  color: var(--navy);
  border-color: var(--navy);
}

/* ── footer ──────────────────────────────────────────────────────────────── */

.foot {
  background: var(--ink);
  padding: 44px 0;
  color: rgba(255, 255, 255, 0.42);
}
.foot__in {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 22px;
}
.foot img {
  height: 30px;
  width: auto;
}
.foot p {
  margin: 0;
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.foot__links {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.foot__links a:hover {
  color: rgba(255, 255, 255, 0.8);
}