/* ==========================================================================
   Zenlo — page chrome: header states, language switcher, section rail, footer.
   Structure follows Concept B (rail, short footer); type and colour stay V1.
   ========================================================================== */

/* ---------- header: active link ---------- */

.nav-links a { position: relative; }

.nav-links a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 1px;
  background: var(--forest);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 420ms var(--ease-out);
}

.nav-links a:hover::after,
.nav-links a.is-active::after {
  transform: scaleX(1);
  transform-origin: left;
}

.nav-links a.is-active { color: var(--forest); }

/* ---------- header: compact mode ----------
   Set by the head script / core.js as html.nav-compact when the viewport is at or below the
   language's breakpoint (data-nav-bp on <html>), so long labels in German or French never overflow. */

html.nav-compact .header-cta {
  display: inline-flex;
  margin-left: auto;
  padding: .68rem 1.05rem;
  font-size: .86rem;
}

html.nav-compact .nav-burger {
  display: inline-flex;
  width: 40px;
  height: 40px;
  flex: none;
}

html.nav-compact .nav {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  max-height: calc(100svh - 100%);
  overflow-y: auto;
  margin-left: 0;
  padding: 6px var(--gutter) 24px;
  flex-direction: column;
  align-items: stretch;
  gap: 20px;
  background: var(--ivory);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 28px 40px -28px rgba(25, 27, 24, .3);
}

html.nav-compact .nav.is-open { display: flex; }

html.nav-compact .nav-links {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}

html.nav-compact .nav-links li + li { border-top: 1px solid var(--line); }

html.nav-compact .nav-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 0;
  font-size: 1.12rem;
  letter-spacing: -.015em;
}

html.nav-compact .nav-links a::after { display: none; }
html.nav-compact .nav-links a::before {
  order: 2;
  color: rgba(31, 74, 58, .45);
  content: '\2192';
  font-size: .95rem;
}
html.nav-compact .lang { display: none; }
html.nav-compact .nav .btn-primary { justify-content: center; min-height: 52px; }

/* languages in the mobile menu: one row of five codes on a tinted track, the current one lifted in white */
.lang-seg { display: none; }
html.nav-compact .lang-seg { display: block; }

.lang-seg__label {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.lang-seg__list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
  margin: 0;
  padding: 4px;
  list-style: none;
  border-radius: 999px;
  background: rgba(31, 74, 58, .07);
}

.lang-seg__list a {
  display: grid;
  place-items: center;
  min-height: 40px;
  border-radius: 999px;
  color: #3f463d;
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-decoration: none;
  transition: background 200ms ease, color 200ms ease;
}

.lang-seg__list a[aria-current="true"] {
  background: var(--paper);
  color: var(--forest);
  box-shadow: 0 1px 2px rgba(25, 27, 24, .08), 0 6px 16px -8px rgba(31, 74, 58, .35);
}

/* ---------- language switcher ---------- */

.lang { position: relative; }

.lang > summary {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  height: 40px;
  padding: 0 .85rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  font-size: .76rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  list-style: none;
  cursor: pointer;
  transition: border-color 200ms ease, background 200ms ease;
}

.lang > summary::-webkit-details-marker { display: none; }
.lang > summary:hover,
.lang[open] > summary { border-color: rgba(31, 74, 58, .35); background: var(--paper); }

.lang__globe { width: 15px; height: 15px; flex: none; }

.lang__chev {
  width: 9px;
  height: 9px;
  flex: none;
  transition: transform 300ms var(--ease-out);
}

.lang[open] .lang__chev { transform: rotate(180deg); }

.lang__list {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 30;
  min-width: 11rem;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 18px 40px -22px rgba(25, 27, 24, .35);
}

.lang[open] .lang__list { animation: lang-in 220ms var(--ease-out); }

@keyframes lang-in {
  from { opacity: 0; transform: translate3d(0, -6px, 0); }
}

.lang__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .55rem .75rem;
  border-radius: 10px;
  color: var(--ink);
  font-size: .9rem;
  text-decoration: none;
  transition: background 160ms ease;
}

.lang__list a:hover { background: var(--sage); }
.lang__list a[aria-current="true"] { color: var(--forest); font-weight: 500; }

.lang__list a[aria-current="true"]::after {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--forest);
}

/* the same five links as pills: inside the mobile menu and in the footer */

.lang-pills {
  display: none;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lang-pills a {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  font-size: .85rem;
  text-decoration: none;
}

.lang-pills a[aria-current="true"] {
  border-color: var(--forest);
  background: var(--forest);
  color: var(--paper);
}

/* ---------- section rail ----------
   Quiet, like Concept B's: a column of numbers and hairline dashes in the left margin. The current section is
   green with the longest dash; hover shows the name. >=1460px numbers + dashes, 1100-1459px dashes only (the
   margin is narrower), below that hidden.

   Over a photograph a halo or mist is not enough: the photos are bright and busy and the numbers are tiny.
   So whenever the rail overlaps a photo band (js/motion.js sets data-tone="photo"), a frosted ivory glass plate
   fades in behind it: strong blur, ivory at 84%, a light inner edge and a soft shadow. That gives the numbers a
   steady ivory ground on any photo. On plain ivory the plate is not there at all (no backdrop work while
   scrolling the rest of the page). Over the dark footer the rail simply turns light.

   Crisp lines: the rail is centred with top/bottom/margin auto instead of translateY(-50%), which could land
   it on half a pixel and smear the 1px dashes into 2px. The dash grows inside a fixed 26px slot, so the label
   never slides and nothing else reflows. */

.rail {
  position: fixed;
  left: 8px;
  top: 0;
  bottom: 0;
  z-index: 60;
  display: none;
  height: max-content;
  margin-block: auto;
  padding: 12px 10px;
  row-gap: 4px;                  /* 19px per step, was 25px */
}

.rail::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 20px;
  background: rgba(248, 246, 241, .84);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55), 0 14px 34px -18px rgba(20, 24, 20, .45);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 400ms var(--ease-soft), visibility 0s linear 400ms;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .rail::before { background: rgba(248, 246, 241, .94); }
}

@media (min-width: 1100px) and (min-height: 560px) {
  .rail { display: grid; }
}

.rail__i {
  position: relative;
  display: flex;
  align-items: center;
  gap: .55rem;
  width: max-content;
  padding-block: 3px;
  text-decoration: none;
}

.rail__n {
  display: none;
  font-size: .5625rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .12em;
  color: rgba(25, 27, 24, .4);
  transition: color 350ms var(--ease-soft);
}

@media (min-width: 1460px) {
  .rail__n { display: block; }
}

.rail__tick {
  position: relative;
  flex: none;
  width: 26px;
  height: 1px;
}

.rail__tick::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 12px;
  height: 1px;
  background: rgba(25, 27, 24, .24);
  transition: width 450ms var(--ease-out), background 350ms var(--ease-soft);
}

.rail__l {
  position: absolute;
  left: calc(100% + 14px);
  padding: 4px 9px;
  border-radius: 8px;
  color: var(--ink);
  font-size: .72rem;
  letter-spacing: .02em;
  white-space: nowrap;
  opacity: 0;
  transform: translate3d(-4px, 0, 0);
  pointer-events: none;
  transition: opacity 240ms ease, transform 320ms var(--ease-out);
}

.rail__i:hover .rail__n,
.rail__i:focus-visible .rail__n { color: var(--ink); }

.rail__i:hover .rail__tick::before,
.rail__i:focus-visible .rail__tick::before { width: 20px; background: var(--ink); }

.rail__i:hover .rail__l,
.rail__i:focus-visible .rail__l { opacity: 1; transform: none; }

.rail__i.is-on .rail__tick::before { width: 26px; background: var(--forest); }
.rail__i.is-on .rail__n { color: var(--forest); }

/* over a photograph: the glass plate, darker marks, and the hover label on a small glass chip of its own */
.rail[data-tone="photo"]::before {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}
.rail[data-tone="photo"] .rail__n { color: rgba(25, 27, 24, .6); }
.rail[data-tone="photo"] .rail__tick::before { background: rgba(25, 27, 24, .36); }
.rail[data-tone="photo"] .rail__i:hover .rail__tick::before { background: var(--ink); }
.rail[data-tone="photo"] .rail__i.is-on .rail__tick::before { background: var(--forest); }
.rail[data-tone="photo"] .rail__l {
  background: rgba(248, 246, 241, .9);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 20px -12px rgba(20, 24, 20, .45);
}

.rail[data-tone="dark"] .rail__n { color: rgba(253, 252, 250, .45); }
.rail[data-tone="dark"] .rail__tick::before { background: rgba(253, 252, 250, .3); }
.rail[data-tone="dark"] .rail__l { color: var(--paper); }
.rail[data-tone="dark"] .rail__i:hover .rail__n { color: var(--paper); }
.rail[data-tone="dark"] .rail__i:hover .rail__tick::before,
.rail[data-tone="dark"] .rail__i.is-on .rail__tick::before { background: var(--paper); }
.rail[data-tone="dark"] .rail__i.is-on .rail__n { color: var(--paper); }

@media print { .rail { display: none !important; } }

/* ---------- footer ---------- */

.foot {
  padding: clamp(44px, 6vw, 64px) 0 26px;
  background: #16382b;
  color: rgba(253, 252, 250, .78);
}

.foot a {
  color: inherit;
  text-decoration: none;
  transition: color 250ms ease;
}

.foot a:hover { color: var(--paper); }
.foot :focus-visible { outline-color: var(--paper); }

.foot .brand,
.foot .brand-word,
.foot .brand-mark { color: var(--paper); }
.foot .brand-desc { color: rgba(253, 252, 250, .6); }

.foot__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}

.foot__tag {
  margin: 18px 0 8px;
  color: var(--paper);
  font-size: 1.35rem;
  font-weight: 300;
  letter-spacing: -.03em;
}

.foot__place {
  margin: 0 0 4px;
  color: rgba(253, 252, 250, .6);
  font-size: .9rem;
}

.foot__tel {
  display: inline-block;
  margin: 0 0 18px;
  color: rgba(253, 252, 250, .85);
  font-size: .95rem;
  letter-spacing: .04em;
}

.foot__wa {
  display: flex;
  width: max-content;
  max-width: 100%;
  align-items: center;
  gap: 10px;
  padding: 11px 18px;
  border: 1px solid rgba(253, 252, 250, .22);
  border-radius: 999px;
  color: var(--paper) !important;
  font-size: .9rem;
}

.foot__wa:hover { background: rgba(253, 252, 250, .08); }

.foot__wa-dot {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: #7fd1a5;
}

.foot__cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.foot__h {
  margin: 0 0 14px;
  color: rgba(253, 252, 250, .5);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.foot__cols ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: .95rem;
}

.foot__privacy {
  margin: clamp(28px, 4vw, 40px) 0 0;
  padding-top: 20px;
  border-top: 1px solid rgba(253, 252, 250, .12);
  color: rgba(253, 252, 250, .55);
  font-size: .82rem;
}

.foot__privacy a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.foot__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 28px;
  margin-top: 14px;
  color: rgba(253, 252, 250, .5);
  font-size: .78rem;
}

.foot__bottom p { margin: 0; }

.foot .lang-pills { display: flex; gap: 4px 6px; }

.foot .lang-pills a {
  min-height: 30px;
  padding: 0 11px;
  border-color: rgba(253, 252, 250, .18);
  color: rgba(253, 252, 250, .7);
  font-size: .78rem;
}

.foot .lang-pills a:hover { border-color: rgba(253, 252, 250, .4); color: var(--paper); }

.foot .lang-pills a[aria-current="true"] {
  border-color: var(--paper);
  background: transparent;
  color: var(--paper);
}

@media (max-width: 780px) {
  .foot__top { grid-template-columns: 1fr; gap: 36px; }
  .foot__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; }
  .foot__cols ul { gap: 0; }
  .foot__cols a { display: inline-block; padding: 9px 0; }
  .foot__bottom { flex-direction: column; align-items: flex-start; }
  .foot__bottom a { display: inline-block; padding: 8px 0; }
}