@charset "utf-8";

/* ==========================================================================
   Judith Simon — judithsimon.nl

   Palette sampled from Judith's existing brand assets:
   plum #672061 · pink #EACCE4 · sage #CCD8D2

   Type: Quicksand (rounded geometric, echoes her existing wordmark) for
   display and UI; Source Serif 4 for prose. The inversion is deliberate —
   her strongest content is long-form storytelling, which wants a reading face.

   The signature device is the arch. Her existing site masks portraits in
   arches; an arch is also a doorway, which is exactly what the three
   audience segments are. It carries the whole navigation idea.
   ========================================================================== */

/* --- tokens --------------------------------------------------------------- */

:root {
  --plum: #672061;
  --plum-deep: #4c1547;
  --plum-soft: #8d4a86;
  --ink: #2e1a2b;
  --ink-soft: #5f4a5c;
  --pink: #eacce4;
  --pink-wash: #f9f0f6;
  --sage: #ccd8d2;
  --sage-wash: #edf3f0;
  --paper: #ffffff;
  --paper-warm: #fdfbfc;
  --line: rgba(103, 32, 97, 0.16);

  --font-display: "Quicksand", ui-rounded, "Avenir Next", system-ui, sans-serif;
  --font-prose: "Source Serif 4", Georgia, "Times New Roman", serif;

  --wide: 74rem;
  --measure: 34rem;
  --gutter: clamp(1.25rem, 5vw, 3.5rem);
  --band: clamp(4rem, 9vw, 7.5rem);

  --arch: 999px 999px 8px 8px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --- reset ---------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-prose);
  font-size: 1.0625rem;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a { color: inherit; }

button { font: inherit; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--plum);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--plum);
  color: #fff;
  padding: 0.75rem 1.25rem;
  font-family: var(--font-display);
  font-weight: 600;
}
.skip:focus { left: 0; }

.vh {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --- typography ----------------------------------------------------------- */

.display,
.hero__q,
.h1,
.h2,
.h3,
.eyebrow,
.btn,
.nav__link,
.wordmark,
.door__label,
.step__n { font-family: var(--font-display); }

.hero__q {
  font-size: clamp(2.05rem, 5.4vw, 4.15rem);
  font-weight: 300;
  line-height: 1.13;
  letter-spacing: -0.018em;
  color: var(--plum);
  margin: 0;
  text-wrap: balance;
}

.h1 {
  font-size: clamp(1.85rem, 4vw, 3rem);
  font-weight: 300;
  line-height: 1.16;
  letter-spacing: -0.015em;
  color: var(--plum);
  margin: 0;
  text-wrap: balance;
}

.h2 {
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 500;
  line-height: 1.24;
  letter-spacing: -0.01em;
  color: var(--plum);
  margin: 0;
  text-wrap: balance;
}

.h3 {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.005em;
  color: var(--plum);
  margin: 0;
}

.eyebrow {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--plum-soft);
  margin: 0;
}

.lede {
  font-size: clamp(1.15rem, 1.7vw, 1.375rem);
  line-height: 1.56;
  color: var(--ink);
  margin: 0;
}

.prose { max-width: var(--measure); }
.prose > p { margin: 0 0 1.15em; }
.prose > p:last-child { margin-bottom: 0; }
.prose em { font-style: italic; }

.muted { color: var(--ink-soft); }

/* --- layout --------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Inline max-widths on .wrap would include the gutter and misalign columns
   against full-width .wrap siblings. These add the gutter back. */
.wrap--narrow { max-width: calc(40rem + 2 * var(--gutter)); }
.wrap--mid    { max-width: calc(46rem + 2 * var(--gutter)); }
.wrap--half   { max-width: calc(52rem + 2 * var(--gutter)); }

.band { padding-block: var(--band); }
.band--sage { background: var(--sage-wash); }
.band--pink { background: var(--pink-wash); }
.band--plum { background: var(--plum); color: #fff; }
.band--tight { padding-block: clamp(2.75rem, 6vw, 4.5rem); }

.band--plum .h1,
.band--plum .h2,
.band--plum .eyebrow { color: #fff; }

.stack > * + * { margin-top: 1.5rem; }
.stack--s > * + * { margin-top: 0.75rem; }
.stack--l > * + * { margin-top: 2.5rem; }

/* Long-form sections: heading hangs in a left rail, prose runs beside it.
   Keeps the measure readable without leaving half the page empty. */
.article { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
.article__row { display: grid; gap: 0.9rem clamp(2rem, 4vw, 4rem); }
@media (min-width: 62rem) {
  .article__row { grid-template-columns: 15rem 1fr; align-items: start; }
  .article__row .h2 { position: sticky; top: 6rem; }
}
.article__row .prose { max-width: 38rem; }

.split {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
@media (min-width: 56rem) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--narrow-first { grid-template-columns: 0.85fr 1fr; }
  .split--narrow-last { grid-template-columns: 1fr 0.85fr; }
  .split--top { align-items: start; }
}

/* --- buttons -------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.875rem;
  padding: 0.7rem 1.5rem;
  border: 1px solid var(--plum);
  border-radius: 999px;
  background: transparent;
  color: var(--plum);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: background 200ms var(--ease), color 200ms var(--ease),
              border-color 200ms var(--ease);
}
.btn:hover { background: var(--plum); color: #fff; }

.btn--solid { background: var(--plum); color: #fff; }
.btn--solid:hover { background: var(--plum-deep); border-color: var(--plum-deep); }

.btn--onplum { border-color: rgba(255, 255, 255, 0.65); color: #fff; }
.btn--onplum:hover { background: #fff; color: var(--plum); border-color: #fff; }

.btn__arrow { transition: transform 200ms var(--ease); }
.btn:hover .btn__arrow { transform: translateX(3px); }

.textlink {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--plum);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
  transition: border-color 200ms var(--ease);
}
.textlink:hover { border-bottom-color: var(--plum); }
.textlink:hover .btn__arrow { transform: translateX(3px); }

/* --- header --------------------------------------------------------------- */

.header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 250ms var(--ease);
}
.header[data-scrolled="true"] { border-bottom-color: var(--line); }

.header__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 4.25rem;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--plum);
  text-decoration: none;
  white-space: nowrap;
}
.wordmark__mark { flex: none; }

.nav { display: none; }
@media (min-width: 62rem) {
  .nav { display: flex; align-items: center; gap: 1.15rem; }
}
.nav__group { display: flex; align-items: center; gap: 1.15rem; }
/* Sets the three audiences apart as alternatives rather than a running list. */
.nav__rule {
  width: 1px;
  height: 1.05rem;
  background: var(--line);
}

.nav__link {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  padding-block: 0.35rem;
  border-bottom: 1px solid transparent;
  transition: color 180ms var(--ease), border-color 180ms var(--ease);
  white-space: nowrap;
}
.nav__link:hover { color: var(--plum); }
.nav__link[aria-current="page"] { color: var(--plum); border-bottom-color: var(--plum); }

.header__side { display: flex; align-items: center; gap: 0.75rem; }

.lang {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
  padding: 0.55rem 0.4rem;
  transition: color 180ms var(--ease);
}
.lang:hover { color: var(--plum); }

/* EN / NL. Codes rather than flags: a language is not a country — Dutch is
   also Belgium, and English belongs to no one flag here. */
.langs {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
}
.langs__on { color: var(--plum); }
.langs__sep { color: var(--line); font-weight: 400; }
.langs__off {
  color: var(--ink-soft);
  text-decoration: none;
  padding: 0.5rem 0.15rem;
  transition: color 180ms var(--ease);
}
.langs__off:hover { color: var(--plum); }

/* The booking CTA stays in the header at every width — it is the only action
   the site asks for. Below the full-nav breakpoint it shrinks and swaps to a
   shorter label so it fits beside the wordmark and the menu button. */
.header .btn { display: inline-flex; }
.btn__short { display: none; }

/* Below the full-nav breakpoint the wordmark, CTA and menu button need the
   whole bar. The language switch lives in the menu panel and the footer, so
   dropping it here costs nothing. */
@media (max-width: 61.99rem) {
  .header .lang,
  .header .langs { display: none; }
}

@media (max-width: 67.99rem) {
  .header .btn--compact {
    min-height: 2.75rem; /* 44px — minimum comfortable touch target */
    padding: 0.5rem 1rem;
    font-size: 0.8125rem;
    gap: 0.4rem;
  }
  .header .btn--compact .btn__long { display: none; }
  .header .btn--compact .btn__short { display: inline; }
  .header .btn--compact .btn__arrow { display: none; }
}

/* Narrower than this and the wordmark, button and burger stop fitting on one
   line. The menu still carries the CTA at the top of its own panel. */
@media (max-width: 23.4rem) {
  .header .btn--compact { display: none; }
}

.burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-right: -0.6rem;
  border: 0;
  background: none;
  color: var(--plum);
}
@media (min-width: 62rem) { .burger { display: none; } }

/* --- mobile menu ---------------------------------------------------------- */

.menu {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--paper);
  padding: 1.25rem var(--gutter) 3rem;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms var(--ease);
}
/* Deliberately not `visibility`: transitioning it means the panel is still
   un-focusable on the frame it opens, so focus can't move into it. The panel
   carries `inert` while closed instead, which applies synchronously. */
.menu[data-open="true"] { opacity: 1; pointer-events: auto; }

.menu__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 3rem;
  margin-bottom: 2rem;
}

.menu__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.menu__link {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--plum);
  text-decoration: none;
  display: block;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--line);
}
.menu__foot { margin-top: auto; padding-top: 2.5rem; display: grid; gap: 1rem; }

/* --- hero ----------------------------------------------------------------- */

.hero {
  position: relative;
  display: grid;
  align-items: center;
  min-height: clamp(30rem, 78vh, 46rem);
  padding-block: clamp(4rem, 10vw, 7rem);
  text-align: center;
  overflow: hidden;
  background: var(--plum-deep);
  isolation: isolate;
}

.hero__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Keeps her in frame as the viewport narrows — she stands centre-left. */
  object-position: 42% 52%;
}

/* The photo is high-key: a blown-out sky sits directly behind the question.
   The veil is heaviest through the middle band where the type sits and eases
   off top and bottom, so the scarf and the sand still read. Measured at 6.6:1
   for white text against the brightest part of the picture. */
.hero__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(
      180deg,
      rgba(48, 12, 45, 0.62) 0%,
      rgba(48, 12, 45, 0.80) 34%,
      rgba(48, 12, 45, 0.80) 74%,
      rgba(48, 12, 45, 0.66) 100%
    ),
    radial-gradient(
      120% 80% at 50% 50%,
      rgba(103, 32, 97, 0.42) 0%,
      rgba(103, 32, 97, 0) 70%
    );
}

.hero__in { position: relative; max-width: 52rem; margin-inline: auto; }

/* Judith's own line. Quiet above the question — it frames it rather than
   competing with it. Deliberately English in both languages: it read that way
   on her Dutch pages too. */
.hero__tagline {
  font-family: var(--font-display);
  font-size: clamp(0.75rem, 1.1vw, 0.8125rem);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--pink);
  margin: 0 0 clamp(1.1rem, 2.4vw, 1.75rem);
}

.hero__q { color: #fff; }
.hero__q span { display: block; }
.hero__body {
  max-width: 32rem;
  margin: clamp(1.5rem, 3vw, 2.25rem) auto 0;
  font-size: clamp(1.125rem, 1.6vw, 1.3125rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.94);
}
.hero__cta { margin-top: clamp(1.75rem, 3.5vw, 2.75rem); }

/* Solid white against the photo — the primary action should be the brightest
   thing on the page, and an outline button gets lost over an image. */
.btn--onhero {
  background: #fff;
  border-color: #fff;
  color: var(--plum);
}
.btn--onhero:hover {
  background: var(--pink);
  border-color: var(--pink);
  color: var(--plum-deep);
}

/* --- the doors ------------------------------------------------------------ */

.doors {
  display: grid;
  gap: clamp(2.25rem, 4vw, 2.75rem);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
@media (min-width: 48rem) { .doors { grid-template-columns: repeat(3, 1fr); } }

.door {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}

.door__arch {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--arch);
  overflow: hidden;
  background: var(--sage);
}
.door__arch::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(103, 32, 97, 0.18);
  background: linear-gradient(to bottom, rgba(76, 21, 71, 0) 40%, rgba(76, 21, 71, 0.34) 100%);
  transition: background 300ms var(--ease), box-shadow 300ms var(--ease);
}
.door__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--ease);
}

.door:hover .door__img,
.door:focus-visible .door__img { transform: scale(1.035); }
.door:hover .door__arch::after,
.door:focus-visible .door__arch::after {
  background: linear-gradient(to bottom, rgba(76, 21, 71, 0) 40%, rgba(76, 21, 71, 0.18) 100%);
  box-shadow: inset 0 0 0 2px var(--plum);
}

.door__body { padding-top: 1.35rem; }
.door__line {
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
}
.door__label {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.9rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--plum);
}
.door:hover .btn__arrow { transform: translateX(3px); }

/* --- generic media -------------------------------------------------------- */

.figure { margin: 0; }
.figure__img { width: 100%; height: auto; border-radius: 4px; }
.figure--arch .figure__img {
  border-radius: var(--arch);
  aspect-ratio: 3 / 4;
  height: auto;
  object-fit: cover;
  object-position: 50% 28%;
}
/* Shown at its own proportions. Forcing a wide crop onto a tall photograph
   cut the top of the frame — and the faces — clean off. */
.figure--portrait { max-width: 24rem; margin-inline: auto; }
.figure--portrait .figure__img { aspect-ratio: auto; height: auto; }

.figure--photo .figure__img {
  aspect-ratio: 4 / 5;
  height: auto;
  object-fit: cover;
  object-position: 50% 38%;
}
.figure__cap {
  margin-top: 0.85rem;
  font-size: 0.9375rem;
  font-style: italic;
  color: var(--ink-soft);
}

.video {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 4px;
  background: var(--sage);
}

.wideimg {
  width: 100%;
  height: auto;
  aspect-ratio: 21 / 9;
  max-height: 30rem;
  object-fit: cover;
  object-position: 50% 42%;
  border-radius: 4px;
}

/* --- quotes --------------------------------------------------------------- */

.quotes {
  display: grid;
  gap: clamp(2rem, 4vw, 2.75rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}
@media (min-width: 52rem) { .quotes { grid-template-columns: repeat(3, 1fr); } }

.quote { display: flex; flex-direction: column; gap: 0.9rem; }
.quote__mark {
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 500;
  line-height: 0.6;
  color: var(--pink);
}
.quote__text {
  font-size: 1.0625rem;
  line-height: 1.6;
  font-style: italic;
  color: var(--ink);
  margin: 0;
}
.quote__who {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--plum-soft);
  margin: 0;
}

/* --- steps (a genuine sequence, so numbering is earned) -------------------- */

.steps {
  display: grid;
  gap: clamp(2rem, 3.5vw, 2.5rem);
  margin-top: clamp(2rem, 4vw, 3rem);
  counter-reset: step;
}
@media (min-width: 52rem) { .steps { grid-template-columns: repeat(3, 1fr); } }

.step { position: relative; padding-top: 2.5rem; }
.step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  top: 0;
  left: 0;
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--plum-soft);
}
.step::after {
  content: "";
  position: absolute;
  top: 1.6rem;
  left: 0;
  width: 1.75rem;
  height: 1px;
  background: var(--line);
}
.step__body { margin: 0.6rem 0 0; font-size: 1rem; line-height: 1.6; }

/* --- definition rows ------------------------------------------------------ */

.rows { margin: 0; max-width: 52rem; }
.row {
  display: grid;
  gap: 0.25rem 2rem;
  padding: 1.05rem 0;
  border-top: 1px solid var(--line);
}
.row:last-child { border-bottom: 1px solid var(--line); }
@media (min-width: 40rem) { .row { grid-template-columns: 11rem 1fr; } }

.row__k {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--plum-soft);
  padding-top: 0.2rem;
}
.row__v { margin: 0; font-size: 1rem; line-height: 1.6; }

/* --- lists ---------------------------------------------------------------- */

.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.85rem; }
.ticks li {
  position: relative;
  padding-left: 1.75rem;
  font-size: 1rem;
  line-height: 1.6;
}
.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.75rem;
  height: 1px;
  background: var(--plum-soft);
}

.themes { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.theme { padding: 1.15rem 0; border-top: 1px solid var(--line); }
.theme:last-child { border-bottom: 1px solid var(--line); }
.theme__k {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--plum);
  margin: 0 0 0.2rem;
}
.theme__v { margin: 0; font-size: 0.9875rem; line-height: 1.6; color: var(--ink-soft); }

/* --- long-form stories ---------------------------------------------------- */

/* Eight accounts in one column read as a wall of text. They run in balanced
   columns instead, in sets separated by a full-width picture.

   Multi-column rather than a two-column grid: grid rows are as tall as their
   tallest cell, so a short account beside a long one leaves an obvious hole.
   Reading order (down column one, then column two) is right here because each
   account stands on its own. */
.stories {
  display: grid;
  gap: clamp(2.5rem, 4vw, 3.25rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
@media (min-width: 62rem) {
  .stories {
    display: block;
    columns: 2;
    column-gap: clamp(2.5rem, 4vw, 4rem);
  }
}

.story {
  max-width: 40rem;
  margin-inline: auto;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  break-inside: avoid;
}
@media (min-width: 62rem) {
  .story { margin-bottom: clamp(2.5rem, 4vw, 3.25rem); }
  .stories > .story:last-child { margin-bottom: 0; }
}
.story__head { margin-top: 0.35rem; }
.story__body { max-width: none; }

/* Not every account carries one, and that is fine — the page should not look
   like a grid of cards. */
.story__pic { margin: 0 0 1.25rem; }
.story__pic img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 4px;
}

.story__sub {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--plum-soft);
  margin: 0 0 0.5rem;
}
.story__body { margin-top: 1.15rem; }
.story__body p { margin: 0 0 1.05em; }
.story__who {
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--plum);
  margin: 1.35rem 0 0;
}

/* --- contact cards -------------------------------------------------------- */

.channels { display: grid; gap: 0.6rem; margin-top: 1.5rem; }

.channel {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.05rem 0.85rem;
  padding: 0.95rem 1.15rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  text-decoration: none;
  background: var(--paper);
  transition: border-color 200ms var(--ease), transform 200ms var(--ease);
}
.channel:hover { border-color: var(--plum); transform: translateY(-2px); }
.channel__icon {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--pink-wash);
  color: var(--plum);
  transition: background 200ms var(--ease);
}
.channel:hover .channel__icon { background: var(--pink); }

.icon { display: block; flex: none; }
.channel__k {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--plum-soft);
}
.channel__v { font-size: 1rem; color: var(--plum); word-break: break-word; }

/* --- inline cal.com calendar (contact page) ------------------------------- */

.calwrap {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  padding: clamp(0.5rem, 1.5vw, 1rem);
  overflow: hidden;
}
/* cal measures its own content and sets the iframe height itself, so the job
   here is only to hold the space until it arrives — otherwise everything below
   jumps. Once cal flags itself done, the reservation is released so the box
   shrink-wraps instead of leaving dead space under the booker. */
.calwrap__frame {
  width: 100%;
  min-height: 44rem;
  overflow: visible;
}
@media (min-width: 48rem) { .calwrap__frame { min-height: 36rem; } }
.calwrap__frame:has(cal-inline[loading="done"]) { min-height: 0; }

.calwrap__fallback { margin: 2rem 0; text-align: center; }

/* --- final CTA band ------------------------------------------------------- */

.cta {
  position: relative;
  overflow: hidden;
  background: var(--plum);
  color: #fff;
  text-align: center;
  padding-block: clamp(3.5rem, 8vw, 6.5rem);
}
.cta__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 55%;
  opacity: 0.5;
}
/* Scrim: the photo stays legible, the type stays readable. Without this the
   headline sits on the bright sky in the picture and drops below 4.5:1. */
.cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(76, 21, 71, 0.86) 0%,
    rgba(76, 21, 71, 0.72) 45%,
    rgba(76, 21, 71, 0.86) 100%
  );
}
.cta__in { position: relative; z-index: 1; max-width: 40rem; margin-inline: auto; }
.cta .h1,
.cta .h2,
.cta .eyebrow { color: #fff; }
.cta__body { margin: 1rem 0 0; font-size: 1.125rem; line-height: 1.6; color: rgba(255, 255, 255, 0.92); }
.cta__btn { margin-top: 2rem; }
.cta__alt {
  margin-top: 2.25rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 1.5rem;
  font-family: var(--font-display);
  font-size: 0.875rem;
}
.cta__alt a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.45);
  padding-bottom: 1px;
}
.cta__alt a:hover { border-bottom-color: #fff; }
.cta__altlabel { color: rgba(255, 255, 255, 0.72); }

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

/* Two shallow rows rather than three stacked columns — the six-item nav list
   was setting the height of the whole thing. */
.footer {
  background: var(--paper-warm);
  border-top: 1px solid var(--line);
  padding-block: clamp(2rem, 3.5vw, 2.75rem);
  font-size: 0.9375rem;
}

.footer__top {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 3rem;
  align-items: flex-start;
  justify-content: space-between;
}
.footer__brand { min-width: 16rem; }
.footer__tag {
  margin: 0.6rem 0 0;
  color: var(--ink-soft);
  max-width: 30rem;
  font-size: 0.875rem;
  line-height: 1.5;
}

.footer__contact {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.75rem;
}
.footer__contact a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--ink);
  text-decoration: none;
  font-size: 0.875rem;
  padding-block: 0.15rem;
}
.footer__contact a:hover { color: var(--plum); }
.footer__contact .icon { color: var(--plum-soft); transition: color 180ms var(--ease); }
.footer__contact a:hover .icon { color: var(--plum); }

.footer__bottom {
  margin-top: 1.5rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  align-items: baseline;
  justify-content: space-between;
}
.footer__nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.4rem;
}
.footer__nav a {
  color: var(--ink);
  text-decoration: none;
  font-size: 0.875rem;
}
.footer__nav a:hover { color: var(--plum); }

.footer__legal {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
  font-size: 0.8125rem;
  color: var(--ink-soft);
}
.footer__legal a { color: var(--ink-soft); }
.footer__legal a:hover { color: var(--plum); }

/* --- page-load motion ----------------------------------------------------- */

.rise { opacity: 0; transform: translateY(14px); }
.is-ready .rise {
  opacity: 1;
  transform: none;
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
  transition-delay: var(--d, 0ms);
}

.reveal { opacity: 0; transform: translateY(18px); }
.reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 650ms var(--ease), transform 650ms var(--ease);
  transition-delay: var(--d, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .rise,
  .reveal { opacity: 1; transform: none; }
  .door:hover .door__img { transform: none; }
}

@media print {
  .header, .menu, .cta__bg { display: none; }
  body { color: #000; }
}