/* ==========================================================================
   Grace Villa — components: hero, cards, gallery, forms, auth, booking, admin
   ========================================================================== */

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

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}

.hero__bg {
  position: absolute;
  inset: -8% 0 -8%;
  z-index: -2;
  will-change: transform;
}
.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* never stops moving */
  animation: kenburns 26s ease-in-out infinite alternate;
}

/* the establishing clip has its own motion, so no Ken Burns on top of it */
.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@keyframes kenburns {
  from { transform: scale(1.06) translate3d(0, 0, 0); }
  to   { transform: scale(1.19) translate3d(-1.6%, 1.4%, 0); }
}

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(6, 6, 10, .9) 0%, rgba(6, 6, 10, .42) 34%, rgba(6, 6, 10, .76) 74%, var(--ink) 100%),
    linear-gradient(90deg, rgba(6, 6, 10, .82), transparent 62%);
}

.hero__inner { position: relative; z-index: 2; padding-block: 160px 120px; }

.hero__title { margin-bottom: 26px; }

/* the scroll cue */
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 34px;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  font-size: .6rem;
  letter-spacing: .38em;
  text-transform: uppercase;
  color: var(--mist-dim);
}
.scroll-cue__rail {
  width: 1px;
  height: 62px;
  background: var(--line-soft);
  position: relative;
  overflow: hidden;
}
.scroll-cue__rail::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent, var(--gold));
  animation: cueRun 2.2s var(--ease) infinite;
}
@keyframes cueRun {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}

/* rotating circular badge */
.seal {
  position: absolute;
  right: var(--pad);
  bottom: 60px;
  z-index: 3;
  width: clamp(92px, 11vw, 134px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}
.seal svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 22s linear infinite; }
.seal text { font-family: var(--sans); font-size: 9.2px; letter-spacing: .32em; fill: var(--gold); text-transform: uppercase; }
.seal__core {
  width: 34%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid var(--gold);
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-size: 1.1rem;
  color: var(--gold-lt);
  animation: sealPulse 3.6s var(--ease) infinite;
}
@keyframes sealPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(198, 161, 91, .5); }
  60%      { box-shadow: 0 0 0 14px rgba(198, 161, 91, 0); }
}
@media (max-width: 900px) { .seal { display: none; } }

/* ---------------------------------------------------------------- stats */

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border-block: 1px solid var(--line);
}
.stat {
  background: var(--ink);
  padding: clamp(26px, 3.4vw, 48px) clamp(18px, 2vw, 30px);
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: background .6s var(--ease);
}
.stat::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  transform: scaleX(0);
  transition: transform .7s var(--ease);
}
.stat:hover { background: var(--ink-3); }
.stat:hover::after { transform: scaleX(1); }
.stat__n {
  font-family: var(--display);
  font-size: clamp(2.2rem, 4.4vw, 3.6rem);
  line-height: 1;
  color: var(--gold-lt);
  display: block;
}
.stat__l {
  margin-top: 12px;
  font-size: .64rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--mist-dim);
}
@media (max-width: 760px) { .stats { grid-template-columns: repeat(2, 1fr); } }

/* ---------------------------------------------------------- residence card */

.rcard {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--ink-2);
  border: 1px solid var(--line-soft);
  isolation: isolate;
  transition: transform .8s var(--ease), border-color .6s var(--ease),
              box-shadow .8s var(--ease);
}
.rcard:hover {
  transform: translateY(-9px);
  border-color: rgba(198, 161, 91, .45);
  box-shadow: 0 34px 80px -34px rgba(0, 0, 0, .95);
}

.rcard__media {
  position: relative;
  display: block;           /* it is a <span>; without this, aspect-ratio is ignored */
  aspect-ratio: 1;          /* square, to match the gallery tiles */
  overflow: hidden;
}
.rcard__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  filter: brightness(.82) saturate(.92);
  transition: transform 1.5s var(--ease), filter 1s var(--ease);
}
.rcard:hover .rcard__media img { transform: scale(1.14); filter: brightness(1) saturate(1.05); }

/* cursor-tracked spotlight */
.rcard__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%),
              rgba(255, 226, 170, .26), transparent 68%);
  opacity: 0;
  transition: opacity .55s var(--ease);
  pointer-events: none;
}
.rcard:hover .rcard__media::after { opacity: 1; }

/* gold rule that draws itself around the media on hover */
.rcard__line {
  position: absolute;
  background: var(--gold);
  transition: transform .55s var(--ease);
  z-index: 2;
}
.rcard__line--t { top: 0; left: 0; width: 100%; height: 1px; transform: scaleX(0); transform-origin: 0 50%; }
.rcard__line--r { top: 0; right: 0; width: 1px; height: 100%; transform: scaleY(0); transform-origin: 50% 0; transition-delay: .1s; }
.rcard__line--b { bottom: 0; right: 0; width: 100%; height: 1px; transform: scaleX(0); transform-origin: 100% 50%; transition-delay: .2s; }
.rcard__line--l { bottom: 0; left: 0; width: 1px; height: 100%; transform: scaleY(0); transform-origin: 50% 100%; transition-delay: .3s; }
.rcard:hover .rcard__line--t, .rcard:hover .rcard__line--b { transform: scaleX(1); }
.rcard:hover .rcard__line--r, .rcard:hover .rcard__line--l { transform: scaleY(1); }

.rcard__tag {
  position: absolute;
  top: 16px; left: 16px;
  z-index: 3;
  padding: 7px 13px;
  background: rgba(6, 6, 10, .74);
  backdrop-filter: blur(9px);
  border: 1px solid var(--line);
  font-size: .58rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold-lt);
}

/* price plate slides up from the bottom edge */
.rcard__price {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 3;
  padding: 16px 20px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  background: linear-gradient(180deg, transparent, rgba(6, 6, 10, .94));
  transform: translateY(100%);
  opacity: 0;
  transition: transform .6s var(--ease), opacity .5s var(--ease);
}
.rcard:hover .rcard__price { transform: none; opacity: 1; }
.rcard__price b {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--gold-lt);
}
.rcard__price small { font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--mist-dim); }

.rcard__body { display: block; padding: 24px 22px 26px; }
.rcard__loc {
  display: block;
  font-size: .62rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 11px;
}
.rcard__name {
  display: block;
  font-family: var(--display);
  font-size: 1.55rem;
  line-height: 1.2;
  margin-bottom: 9px;
  transition: color .45s var(--ease);
}
.rcard:hover .rcard__name { color: var(--gold-lt); }
.rcard__meta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-size: .74rem;
  color: var(--mist-dim);
  letter-spacing: .06em;
}
.rcard__meta span { display: inline-flex; align-items: center; gap: 6px; }

/* ------------------------------------------------- Airbnb page house card */
/* An .rcard that is an <article> (it holds buttons), with live availability. */

.abcard h2.rcard__name { font-weight: 400; margin-top: 0; }
.abcard .rcard__price { transform: none; opacity: 1; }   /* always shown: touch screens have no hover */
.abcard.is-booked .rcard__media img { filter: brightness(.5) saturate(.6); }

.abcard__state {
  position: absolute;
  top: 16px; right: 16px;
  z-index: 3;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 13px;
  background: rgba(6, 6, 10, .74);
  backdrop-filter: blur(9px);
  border: 1px solid rgba(111, 168, 140, .5);
  font-size: .58rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #9cd0b8;
}
.abcard__state i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.abcard.is-booked .abcard__state { border-color: rgba(199, 122, 106, .5); color: #e0a295; }

/* the next sixty nights, two rows of thirty */
.abstrip {
  display: grid;
  grid-template-columns: repeat(30, 1fr);
  gap: 3px;
  margin-top: 22px;
}
.abstrip i, .abstrip__key i {
  display: block;
  aspect-ratio: 1;
  background: rgba(198, 161, 91, .55);
}
.abstrip i.is-off, .abstrip__key i.is-off { background: rgba(242, 237, 227, .1); }
.abstrip__key {
  display: flex; flex-wrap: wrap; gap: 16px;
  margin: 10px 0 0;
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mist-dim);
}
.abstrip__key span { display: inline-flex; align-items: center; gap: 7px; }
.abstrip__key i { width: 9px; }
.abstrip__key .muted { margin-left: auto; }
.abcard__note { margin: 16px 0 0; font-size: .86rem; line-height: 1.7; color: var(--mist); }

@keyframes livePulse {
  70%, 100% { box-shadow: 0 0 0 8px rgba(111, 168, 140, 0); }
}

/* ------------------------------------------------------ admin action buttons */

.abtn {
  position: relative;
  padding: 8px 14px;
  border: 1px solid var(--line-soft);
  border-radius: 2px;
  background: none;
  color: var(--mist);
  font-family: var(--sans);
  font-size: .58rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: color .35s var(--ease), border-color .35s var(--ease),
              transform .35s var(--ease);
}
.abtn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: currentColor;
  opacity: 0;
  transform: translateY(100%);
  transition: transform .4s var(--ease), opacity .4s var(--ease);
}
.abtn:hover {
  border-color: var(--gold);
  color: var(--gold-lt);
  transform: translateY(-2px);
}
.abtn:hover::before { transform: translateY(0); opacity: .13; }
.abtn:active { transform: translateY(0); }
.abtn--book { border-color: rgba(199, 122, 106, .5); color: #e0a295; }
.abtn--book:hover { background: rgba(199, 122, 106, .16); border-color: var(--rose); color: #f1c3b8; }
.abtn--free { border-color: rgba(111, 168, 140, .5); color: #9cd0b8; }
.abtn--free:hover { background: rgba(111, 168, 140, .16); border-color: var(--jade); color: #b8e2cd; }
.abtn--del:hover { border-color: var(--rose); color: var(--rose); background: rgba(199, 122, 106, .1); }
.abtn[aria-busy="true"] { opacity: .5; pointer-events: none; }

/* ------------------------------------------------- horizontal pinned rail */

.rail { position: relative; }
.rail__viewport { overflow: hidden; }
.rail__track {
  display: flex;
  gap: clamp(16px, 2vw, 30px);
  will-change: transform;
}
.rail__card {
  position: relative;
  flex: none;
  width: clamp(250px, 30vw, 420px);
  aspect-ratio: 3 / 4;
  overflow: hidden;
}
.rail__card img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(.74);
  transition: filter .8s var(--ease), transform 1.3s var(--ease);
}
.rail__card:hover img { filter: brightness(1); transform: scale(1.07); }

/* the clip sits over its own poster frame and fades in on hover, exactly as a
   gallery tile does — nothing is fetched until the pointer arrives */
.rail__card video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  z-index: 1;
  filter: brightness(.74);
  transition: opacity .5s var(--ease), filter .8s var(--ease);
}
.rail__card.is-playing video { opacity: 1; }
.rail__card:hover video { filter: brightness(1); }

.rail__card figcaption {
  position: absolute;
  left: 22px; bottom: 22px;
  right: 22px;
  z-index: 2;
  font-family: var(--display);
  font-size: 1.35rem;
}
.rail__card figcaption em {
  display: block;
  font-family: var(--sans);
  font-style: normal;
  font-size: .58rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 6px;
  transform: translateY(8px);
  opacity: 0;
  transition: all .55s var(--ease);
}
.rail__card:hover figcaption em { transform: none; opacity: 1; }

/* --------------------------------------------------------- paired films

   Two portrait clips side by side, offset so they read as two frames rather
   than one split picture. Both run continuously (main.js starts them when
   they scroll in and pauses them when they leave).                        */

.twofilm {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(10px, 1.4vw, 20px);
  align-items: start;
}

.twofilm__frame {
  position: relative;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  border: 1px solid var(--line-soft);
  background: var(--ink-3);
}
/* the second frame sits lower, so the pair is not a single flat band */
.twofilm__frame--drop { margin-top: clamp(24px, 5vw, 64px); }

.twofilm__frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* the clip's own motion, plus a slow drift across the frame so the pair
     never sits still even on a held shot */
  animation: filmDrift 22s ease-in-out infinite alternate;
}
.twofilm__frame:nth-child(2) video { animation-duration: 27s; animation-direction: alternate-reverse; }

@keyframes filmDrift {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to   { transform: scale(1.12) translate3d(-1.2%, -1.6%, 0); }
}

/* a gold edge lights as the pointer crosses either frame */
.twofilm__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid transparent;
  transition: border-color .6s var(--ease);
  pointer-events: none;
}
.twofilm__frame:hover::after { border-color: rgba(198, 161, 91, .45); }

/* On a phone the pair would make the section twice as tall as it needs to be,
   so the second frame goes and the first takes the full width. */
@media (max-width: 900px) {
  .twofilm { grid-template-columns: 1fr; }
  .twofilm__frame--drop { display: none; }
  .twofilm__frame { aspect-ratio: 4 / 5; }
}

@media (prefers-reduced-motion: reduce) {
  .twofilm__frame video { animation: none; transform: none; }
}

/* ---------------------------------------------------------------- amenity */

.amen {
  padding: 30px 24px;
  border: 1px solid var(--line-soft);
  background: var(--ink-2);
  position: relative;
  overflow: hidden;
  transition: border-color .5s var(--ease), transform .6s var(--ease), background .5s var(--ease);
}
.amen:hover { border-color: rgba(198, 161, 91, .4); transform: translateY(-6px); background: var(--ink-3); }
.amen__ico {
  width: 46px; height: 46px;
  margin-bottom: 20px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--gold);
  transition: transform .7s var(--ease), background .5s var(--ease), color .5s var(--ease);
  transform-style: preserve-3d;
}
.amen:hover .amen__ico { transform: rotateY(360deg); background: var(--gold); color: var(--ink); }
.amen h3 { font-size: 1.22rem; margin-bottom: 10px; }
.amen p { font-size: .87rem; color: var(--mist); margin: 0; line-height: 1.75; }
/* sheen crossing the tile */
.amen::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 40%, rgba(198, 161, 91, .1) 50%, transparent 60%);
  transform: translateX(-100%);
  transition: transform 1s var(--ease);
  pointer-events: none;
}
.amen:hover::after { transform: translateX(100%); }

/* ---------------------------------------------------------------- forms */

.field { position: relative; margin-bottom: 26px; }

.field label {
  display: block;
  font-size: .62rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  /* --mist-dim is too faint for a label at this size and tracking */
  color: var(--mist);
  margin-bottom: 9px;
  transition: color .4s var(--ease);
}
.field:focus-within label { color: var(--gold); }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 14px 2px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ivory);
  font-family: var(--sans);
  font-size: .97rem;
  font-weight: 300;
  letter-spacing: .02em;
  transition: border-color .4s var(--ease);
}
.field textarea { resize: vertical; min-height: 118px; line-height: 1.7; }
.field input:focus,
.field select:focus,
.field textarea:focus { outline: none; }
.field input::placeholder, .field textarea::placeholder { color: rgba(242, 237, 227, .22); }

/* gold underline that grows from the centre */
.field__bar {
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transition: transform .6s var(--ease);
}
.field:focus-within .field__bar { transform: scaleX(1); }

.field select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23C6A15B' stroke-width='1.3' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4px center;
  padding-right: 26px;
}
.field select option { background: var(--ink-3); color: var(--ivory); }

/* native date pickers, made to match */
.field input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(72%) sepia(35%) saturate(520%) hue-rotate(2deg);
  cursor: pointer;
  opacity: .8;
}

.field__err {
  display: block;
  margin-top: 8px;
  font-size: .72rem;
  color: var(--rose);
  letter-spacing: .04em;
}
/* `display: block` above beats the hidden attribute's own display: none, so a
   message marked hidden would otherwise sit on the form permanently — as the
   Airbnb editor's error line did. */
.field__err[hidden] { display: none; }

/* Two half fields share a row. They are inline-block, so the whitespace
   between the tags counts toward the line — the widths leave room for it,
   otherwise the pair wraps. */
.field--half {
  display: inline-block;
  vertical-align: top;
  width: calc(50% - 14px);
}
.field--half + .field--half { margin-left: 16px; }
@media (max-width: 560px) {
  .field--half { width: 100%; }
  .field--half + .field--half { margin-left: 0; }
}

/* ---------------------------------------------------------------- auth */

.auth {
  min-height: 100svh;
  display: grid;
  grid-template-columns: 1.06fr .94fr;
  position: relative;
  overflow: hidden;
}
@media (max-width: 980px) { .auth { grid-template-columns: 1fr; } }

/* left: living imagery */
.auth__art {
  position: relative;
  overflow: hidden;
  display: grid;
  align-items: flex-end;
  padding: clamp(30px, 5vw, 70px);
}
@media (max-width: 980px) { .auth__art { min-height: 42vh; } }
.auth__art img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  animation: kenburns 30s ease-in-out infinite alternate;
}
.auth__art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(200deg, rgba(6, 6, 10, .58), rgba(6, 6, 10, .93));
}
.auth__quote { position: relative; z-index: 2; max-width: 30ch; }
.auth__quote p {
  font-family: var(--display);
  font-size: clamp(1.5rem, 2.8vw, 2.4rem);
  line-height: 1.3;
  font-style: italic;
  color: var(--ivory);
  margin: 0 0 18px;
}

/* right: the animated card */
.auth__panel {
  display: grid;
  place-items: center;
  padding: clamp(84px, 9vw, 40px) clamp(20px, 5vw, 64px) clamp(40px, 6vw, 64px);
  position: relative;
  background: var(--ink);
}

.authcard {
  position: relative;
  width: min(440px, 100%);
  padding: clamp(30px, 4vw, 46px);
  background: rgba(11, 11, 17, .82);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  isolation: isolate;
  overflow: hidden;
}

/* — continuous animation 1: a conic gradient orbiting the card border — */
.authcard::before {
  content: "";
  position: absolute;
  inset: -180%;
  z-index: -2;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(198, 161, 91, .1) 40deg,
    var(--gold-hi) 78deg,
    var(--gold) 96deg,
    rgba(198, 161, 91, .1) 134deg,
    transparent 180deg,
    transparent 360deg);
  animation: spin 5.5s linear infinite;
}
/* mask that leaves only a 1px rim of the conic showing */
.authcard::after {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  background: rgba(9, 9, 14, .93);
  backdrop-filter: blur(18px);
}

/* — continuous animation 2: orbs drifting behind the glass — */
.authcard__orbs {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(34px);
  opacity: .5;
}
.orb--1 {
  width: 190px; height: 190px;
  top: -40px; left: -50px;
  background: radial-gradient(circle, rgba(198, 161, 91, .85), transparent 70%);
  animation: orbit1 13s ease-in-out infinite;
}
.orb--2 {
  width: 150px; height: 150px;
  bottom: -30px; right: -40px;
  background: radial-gradient(circle, rgba(199, 122, 106, .7), transparent 70%);
  animation: orbit2 17s ease-in-out infinite;
}
.orb--3 {
  width: 120px; height: 120px;
  top: 45%; left: 55%;
  background: radial-gradient(circle, rgba(111, 168, 140, .5), transparent 70%);
  animation: orbit3 21s ease-in-out infinite;
}
@keyframes orbit1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(150px, 90px) scale(1.25); }
  66%      { transform: translate(60px, 200px) scale(.85); }
}
@keyframes orbit2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  40%      { transform: translate(-130px, -110px) scale(1.3); }
  75%      { transform: translate(-40px, -220px) scale(.9); }
}
@keyframes orbit3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-170px, -80px) scale(1.4); }
}

/* — continuous animation 3: a morphing blob outline — */
.authcard__blob {
  position: absolute;
  z-index: -1;
  top: 50%; left: 50%;
  width: 320px; height: 320px;
  margin: -160px 0 0 -160px;
  border: 1px solid rgba(198, 161, 91, .22);
  opacity: .8;
  pointer-events: none;
  animation: morph 15s ease-in-out infinite, spin 40s linear infinite;
}
@keyframes morph {
  0%, 100% { border-radius: 62% 38% 44% 56% / 48% 56% 44% 52%; }
  25%      { border-radius: 38% 62% 58% 42% / 62% 38% 62% 38%; }
  50%      { border-radius: 52% 48% 32% 68% / 38% 62% 38% 62%; }
  75%      { border-radius: 44% 56% 66% 34% / 56% 44% 56% 44%; }
}

/* — continuous animation 4: a scanning hairline — */
.authcard__scan {
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  z-index: 0;
  background: linear-gradient(90deg, transparent, rgba(233, 210, 160, .55), transparent);
  animation: scanline 6.5s var(--ease) infinite;
  pointer-events: none;
}
@keyframes scanline {
  0%        { top: 0;    opacity: 0; }
  12%       { opacity: 1; }
  88%       { opacity: 1; }
  100%      { top: 100%; opacity: 0; }
}

.authcard__inner { position: relative; z-index: 2; }

/* sign in / sign up toggle */
.authtabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  position: relative;
  border: 1px solid var(--line-soft);
  margin-bottom: 34px;
}
.authtabs__ind {
  position: absolute;
  top: 0; left: 0;
  width: 50%; height: 100%;
  background: linear-gradient(140deg, var(--gold-hi), var(--gold) 60%, var(--gold-dk));
  transition: transform .6s var(--ease);
  z-index: 0;
}
.authtabs.is-up .authtabs__ind { transform: translateX(100%); }
.authtabs button {
  position: relative;
  z-index: 1;
  padding: 14px 8px;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--sans);
  font-size: .68rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--mist);
  transition: color .45s var(--ease);
}
.authtabs button[aria-selected="true"] { color: var(--ink); }

.authform { display: none; }
.authform.is-on { display: block; animation: formIn .65s var(--ease); }
@keyframes formIn {
  from { opacity: 0; transform: translateY(16px); }
}

.authmeta {
  margin-top: 22px;
  font-size: .78rem;
  color: var(--mist-dim);
  text-align: center;
}

/* password strength meter */
.pwbar {
  height: 2px;
  background: var(--line-soft);
  margin-top: 10px;
  overflow: hidden;
}
.pwbar i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--rose);
  transition: width .5s var(--ease), background .5s var(--ease);
}
.pwbar.lv2 i { width: 50%;  background: var(--gold); }
.pwbar.lv3 i { width: 78%;  background: var(--gold-lt); }
.pwbar.lv4 i { width: 100%; background: var(--jade); }
.pwbar.lv1 i { width: 25%; }

/* ---------------------------------------------------------------- booking */

.bookgrid {
  display: grid;
  grid-template-columns: 1.35fr .85fr;
  gap: clamp(24px, 3.5vw, 54px);
  align-items: start;
}
@media (max-width: 1000px) { .bookgrid { grid-template-columns: 1fr; } }

.panel {
  padding: clamp(26px, 3.4vw, 44px);
  border: 1px solid var(--line-soft);
  background: var(--ink-2);
  position: relative;
  overflow: hidden;
}
.panel--sticky { position: sticky; top: 104px; }
@media (max-width: 1000px) { .panel--sticky { position: static; } }

/* summary panel gets a slow gold shimmer along its top edge */
.panel--glow::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-hi), transparent);
  transform: translateX(-100%);
  animation: ruleSweep 5s var(--ease) infinite;
}

/* stepper */
.steps { display: flex; align-items: center; gap: 0; margin-bottom: 38px; }
.step { display: flex; align-items: center; gap: 12px; flex: 1; }
.step:last-child { flex: none; }
.step__n {
  width: 34px; height: 34px;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  font-size: .72rem;
  color: var(--mist-dim);
  transition: all .5s var(--ease);
}
.step__t {
  font-size: .62rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--mist-dim);
  white-space: nowrap;
  transition: color .5s var(--ease);
}
.step__bar {
  flex: 1;
  height: 1px;
  background: var(--line-soft);
  margin: 0 14px;
  position: relative;
  overflow: hidden;
}
.step__bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .8s var(--ease);
}
.step.is-done .step__bar::after { transform: scaleX(1); }
.step.is-on .step__n {
  border-color: var(--gold);
  background: var(--gold);
  color: var(--ink);
  box-shadow: 0 0 0 6px rgba(198, 161, 91, .13);
}
.step.is-on .step__t { color: var(--gold-lt); }
.step.is-done .step__n { border-color: var(--gold); color: var(--gold); }
@media (max-width: 720px) { .step__t { display: none; } }

.bstep { display: none; }
.bstep.is-on { display: block; animation: formIn .6s var(--ease); }

/* summary line items */
.sumline {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 0;
  font-size: .87rem;
  color: var(--mist);
  border-bottom: 1px solid var(--line-soft);
}
.sumline b { font-weight: 400; color: var(--ivory); }
.sumline--total {
  border-bottom: 0;
  border-top: 1px solid var(--line);
  margin-top: 8px;
  padding-top: 18px;
  font-size: 1rem;
}
.sumline--total b {
  font-family: var(--display);
  font-size: 1.7rem;
  color: var(--gold-lt);
}

.sum__media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  margin: -1px -1px 24px;
  position: relative;
}
.sum__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  animation: kenburns 24s ease-in-out infinite alternate;
}

/* availability pill */
.avail {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.avail--yes { border-color: rgba(111, 168, 140, .5); color: #9cd0b8; }
.avail--no  { border-color: rgba(199, 122, 106, .5); color: #e0a295; }
.avail--idle { color: var(--mist-dim); }
.avail i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: livePulse 2s var(--ease) infinite;
}

/* confirmation */
.confirm { text-align: center; padding-block: clamp(40px, 6vw, 80px); }
.confirm__seal {
  width: 108px; height: 108px;
  margin: 0 auto 32px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  display: grid;
  place-items: center;
  color: var(--gold);
  animation: sealPulse 3s var(--ease) infinite;
}
.confirm__ref {
  display: inline-block;
  margin: 26px 0 8px;
  padding: 15px 34px;
  border: 1px dashed var(--line);
  font-family: var(--display);
  font-size: clamp(1.5rem, 3.4vw, 2.3rem);
  letter-spacing: .2em;
  color: var(--gold-lt);
}

/* ---------------------------------------------------------------- admin */

.adm__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 34px;
}
.adm__tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.adm__tab {
  padding: 11px 20px;
  border: 1px solid var(--line-soft);
  background: none;
  color: var(--mist);
  font-family: var(--sans);
  font-size: .64rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all .4s var(--ease);
}
.adm__tab { position: relative; overflow: hidden; }
.adm__tab::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transition: transform .45s var(--ease);
}
.adm__tab:hover { border-color: var(--line); color: var(--ivory); }
.adm__tab:hover::after { transform: scaleX(1); }
.adm__tab.is-on::after { transform: scaleX(0); }
.adm__tab.is-on { background: var(--gold); border-color: var(--gold); color: var(--ink); }

.admpane { display: none; }
.admpane.is-on { display: block; animation: formIn .5s var(--ease); }

.tbl { width: 100%; border-collapse: collapse; font-size: .84rem; }
.tbl th {
  text-align: left;
  padding: 14px 14px;
  border-bottom: 1px solid var(--line);
  font-family: var(--sans);
  font-size: .6rem;
  font-weight: 400;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold);
  white-space: nowrap;
}
.tbl td {
  padding: 15px 14px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--mist);
  vertical-align: middle;
}
.tbl tbody tr { transition: background .4s var(--ease); }
.tbl tbody tr:hover { background: rgba(198, 161, 91, .045); }
.tbl b { color: var(--ivory); font-weight: 400; }
.tblwrap { overflow-x: auto; }

.pill {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: .58rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  border: 1px solid;
}
.pill--pending   { color: var(--gold);  border-color: rgba(198, 161, 91, .45); }
.pill--confirmed { color: #9cd0b8; border-color: rgba(111, 168, 140, .45); }
.pill--cancelled { color: #e0a295; border-color: rgba(199, 122, 106, .45); }

.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 38px; }
@media (max-width: 860px) { .kpis { grid-template-columns: repeat(2, 1fr); } }
.kpi {
  padding: 24px 22px;
  border: 1px solid var(--line-soft);
  background: var(--ink-2);
  position: relative;
  overflow: hidden;
  transition: border-color .5s var(--ease), transform .5s var(--ease);
}
.kpi:hover { border-color: rgba(198, 161, 91, .4); transform: translateY(-4px); }
.kpi__n {
  font-family: var(--display);
  font-size: 2.3rem;
  line-height: 1;
  color: var(--gold-lt);
}
.kpi__l {
  margin-top: 9px;
  font-size: .58rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--mist-dim);
}

/* empty state */
.empty {
  padding: clamp(40px, 6vw, 76px) 24px;
  text-align: center;
  border: 1px dashed var(--line-soft);
  color: var(--mist-dim);
}
.empty h3 { font-size: 1.5rem; color: var(--ivory); margin-bottom: 10px; }

/* modal */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(3, 3, 6, .84);
  backdrop-filter: blur(9px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .45s var(--ease), visibility .45s;
}
.modal.is-open { opacity: 1; visibility: visible; }
.modal__box {
  width: min(660px, 100%);
  max-height: 88vh;
  overflow-y: auto;
  padding: clamp(26px, 3.6vw, 42px);
  background: var(--ink-2);
  border: 1px solid var(--line);
  transform: translateY(26px) scale(.97);
  transition: transform .55s var(--ease);
  box-shadow: 0 50px 120px -40px #000;
}
.modal.is-open .modal__box { transform: none; }
.modal__x {
  position: absolute;
  top: 18px; right: 18px;
  width: 38px; height: 38px;
  border: 1px solid var(--line-soft);
  border-radius: 50%;
  background: none;
  color: var(--mist);
  cursor: pointer;
  transition: all .4s var(--ease);
}
.modal__x:hover { border-color: var(--gold); color: var(--gold); transform: rotate(90deg); }

/* --------------------------------------------------------- event enquiry */

.modal__box.enq { width: min(720px, 100%); }

/* the honeypot: present for bots, absent for people and screen readers */
.enq__trap {
  position: absolute !important;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.enq__opt {
  letter-spacing: .08em;
  text-transform: none;
  color: var(--mist-dim);
}

/* radio options drawn as pills, in the language of the filters */
.choice {
  border: 0;
  margin: 0 0 26px;
  padding: 0;
  min-width: 0;
}
.choice legend {
  padding: 0;
  margin-bottom: 12px;
  font-size: .62rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--mist);
}
.choice__row { display: flex; flex-wrap: wrap; gap: 8px; }
.choice__opt { position: relative; cursor: pointer; }
.choice__opt input {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
  cursor: pointer;
}
.choice__opt span {
  display: inline-block;
  padding: 10px 18px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  font-size: .66rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mist);
  transition: background .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease);
}
.choice__opt:hover span { border-color: var(--gold); color: var(--gold-lt); }
.choice__opt input:checked + span { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.choice__opt input:focus-visible + span { outline: 1px solid var(--gold-hi); outline-offset: 3px; }
.choice__note {
  margin: 12px 0 0;
  font-size: .76rem;
  color: var(--mist-dim);
  display: flex;
  align-items: center;
  gap: 7px;
}

/* the band at the top of the contact form that points to the popup */
.enq-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 18px 20px;
  margin-bottom: 34px;
  border: 1px solid var(--line);
  background: linear-gradient(120deg, rgba(198, 161, 91, .09), transparent 70%);
}
.enq-cta b { display: block; font-weight: 400; color: var(--ivory); font-size: .95rem; }
.enq-cta span { display: block; font-size: .8rem; color: var(--mist); margin-top: 3px; }

/* ------------------------------------------------------------ social */

.social { display: flex; gap: 10px; flex-wrap: wrap; }
.social__link {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--gold-lt);
  transition: border-color .4s var(--ease), color .4s var(--ease), background .4s var(--ease), transform .4s var(--ease);
}
.social__link:hover {
  border-color: var(--gold);
  color: var(--ink);
  background: var(--gold);
  transform: translateY(-2px);
}

/* ---------------------------------------------------------------- misc */

.pagehead {
  position: relative;
  padding-block: clamp(150px, 17vw, 230px) clamp(50px, 6vw, 84px);
  overflow: hidden;
  isolation: isolate;
}
.pagehead__bg { position: absolute; inset: -10% 0; z-index: -2; }
.pagehead__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  animation: kenburns 30s ease-in-out infinite alternate;
}
.pagehead::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(6, 6, 10, .93) 0%, rgba(6, 6, 10, .6) 45%, var(--ink) 100%);
}

.crumb {
  font-size: .62rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--mist-dim);
  margin-top: 20px;
}
.crumb a { color: var(--gold); }
.crumb a:hover { text-decoration: underline; text-underline-offset: 4px; }

.filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding-block: 8px 34px;
}
.filter {
  position: relative;
  padding: 10px 20px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: none;
  color: var(--mist);
  font-family: var(--sans);
  font-size: .64rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: color .4s var(--ease), border-color .4s var(--ease);
}
/* the gold sweeps in from the left and retreats the same way */
.filter::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--gold-hi), var(--gold));
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .45s var(--ease);
}
.filter:hover { border-color: var(--gold); color: var(--ink); }
.filter:hover::before { transform: scaleX(1); }
.filter.is-on { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.filter.is-on::before { background: linear-gradient(90deg, var(--gold-hi), var(--gold-lt)); }

.is-hidden { display: none !important; }

/* testimonial */
.quote {
  padding: clamp(28px, 3.6vw, 46px);
  border: 1px solid var(--line-soft);
  background: var(--ink-2);
  position: relative;
  transition: border-color .5s var(--ease), transform .6s var(--ease);
}
.quote:hover { border-color: rgba(198, 161, 91, .4); transform: translateY(-6px); }
.quote::before {
  content: "\201C";
  position: absolute;
  top: 2px; right: 22px;
  font-family: var(--display);
  font-size: 7rem;
  line-height: 1;
  color: rgba(198, 161, 91, .14);
  animation: ghostBreathe 7s var(--ease) infinite;
}
.quote p {
  font-family: var(--display);
  font-size: 1.24rem;
  font-style: italic;
  line-height: 1.6;
  color: var(--ivory);
  margin: 0 0 22px;
}
.quote footer { display: flex; align-items: center; gap: 13px; }
.quote__av {
  width: 42px; height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(140deg, var(--gold), var(--gold-dk));
  color: var(--ink);
  font-size: .74rem;
}
.quote__who { font-size: .85rem; color: var(--ivory); }
.quote__who em {
  display: block;
  font-style: normal;
  font-size: .62rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--mist-dim);
  margin-top: 3px;
}

.stars { color: var(--gold); letter-spacing: .18em; font-size: .8rem; }

/* contact info rows */
.inforow {
  display: flex;
  gap: 18px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line-soft);
  transition: padding-left .5s var(--ease);
}
.inforow:hover { padding-left: 10px; }
.inforow__ico {
  width: 40px; height: 40px;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--gold);
  transition: background .5s var(--ease), color .5s var(--ease);
}
.inforow:hover .inforow__ico { background: var(--gold); color: var(--ink); }
.inforow h4 {
  font-family: var(--sans);
  font-size: .6rem;
  font-weight: 400;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--mist-dim);
  margin: 0 0 6px;
}
.inforow p { margin: 0; font-size: .95rem; color: var(--ivory); }

/* map-ish plate */
.plate {
  position: relative;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  border: 1px solid var(--line-soft);
}
.plate img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) brightness(.55); transition: filter 1s var(--ease); }
.plate:hover img { filter: grayscale(.2) brightness(.8); }
.plate__pin {
  position: absolute;
  left: 50%; top: 48%;
  width: 16px; height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 0 rgba(198, 161, 91, .6);
  animation: livePulse 2.2s var(--ease) infinite;
}

/* faq */
.faq { border-bottom: 1px solid var(--line-soft); }
.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 24px 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--display);
  font-size: 1.2rem;
  color: var(--ivory);
  transition: color .4s var(--ease);
}
.faq__q:hover { color: var(--gold-lt); }
.faq__q i {
  position: relative;
  width: 14px; height: 14px;
  flex: none;
}
.faq__q i::before, .faq__q i::after {
  content: "";
  position: absolute;
  background: var(--gold);
  transition: transform .5s var(--ease);
}
.faq__q i::before { top: 6.5px; left: 0; width: 14px; height: 1px; }
.faq__q i::after  { left: 6.5px; top: 0; width: 1px; height: 14px; }
.faq.is-open .faq__q i::after { transform: rotate(90deg); }
.faq__a {
  overflow: hidden;
  max-height: 0;
  transition: max-height .6s var(--ease);
}
.faq__a p { margin: 0 0 24px; color: var(--mist); font-size: .93rem; line-height: 1.85; max-width: 70ch; }

/* ------------------------------------------------ availability result cell */

.rescell {
  display: grid;
  grid-template-columns: 92px 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 14px;
  margin-bottom: 12px;
  border: 1px solid var(--line-soft);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: border-color .45s var(--ease), background .45s var(--ease),
              transform .45s var(--ease);
}
.rescell:hover {
  border-color: rgba(198, 161, 91, .45);
  background: rgba(198, 161, 91, .05);
  transform: translateX(5px);
}
.rescell.is-picked {
  border-color: var(--gold);
  background: rgba(198, 161, 91, .1);
}
/* a gold spine marks the chosen house */
.rescell::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 2px; height: 100%;
  background: var(--gold);
  transform: scaleY(0);
  transform-origin: 50% 0;
  transition: transform .5s var(--ease);
}
.rescell.is-picked::before { transform: scaleY(1); }

.rescell__img {
  width: 92px;
  aspect-ratio: 1;
  overflow: hidden;
}
.rescell__img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease);
}
.rescell:hover .rescell__img img { transform: scale(1.1); }

.rescell__loc {
  display: block;
  font-size: .56rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 5px;
}
.rescell__name {
  display: block;
  font-family: var(--display);
  font-size: 1.2rem;
  line-height: 1.25;
  margin-bottom: 5px;
}
.rescell__meta { display: block; font-size: .74rem; color: var(--mist-dim); }

.rescell__price { text-align: right; padding-right: 6px; }
.rescell__price b {
  display: block;
  font-family: var(--display);
  font-size: 1.28rem;
  font-weight: 400;
  color: var(--gold-lt);
}
.rescell__price small {
  font-size: .56rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--mist-dim);
}

@media (max-width: 620px) {
  .rescell { grid-template-columns: 68px 1fr; }
  .rescell__img { width: 68px; }
  .rescell__price { grid-column: 2; text-align: left; padding: 0; }
}

/* A house added to a booking: the cell toggles it, its dates open beneath. */
.addon { margin-bottom: 12px; }
.addon .rescell { margin-bottom: 0; }
.addon__dates { display: none; padding: 20px 14px 4px; border: 1px solid var(--line-soft); border-top: 0; }
.addon.is-on .addon__dates { display: block; animation: formIn .5s var(--ease); }
.addon__dates .field__err { margin: -6px 0 16px; }

/* Parts of the booking form that only apply to an event, or to a stay alone. */
[data-for-kind][hidden] { display: none !important; }

/* ------------------------------------------------------ header sign-in icon */

/* The Sign in button uses the ordinary small-button look (.btn .btn--sm) — the
   same as the Reserve button that used to sit beside it. This only lays the icon
   and label out, and on a narrow screen drops the label so it stays as an icon. */
.nav__login {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.nav__login svg { flex: none; }
@media (max-width: 900px) {
  .nav__login span { display: none; }
}

/* ------------------------------------------------ show / hide password eye */

.field--pw input { padding-right: 46px; }
.pwtoggle {
  position: absolute;
  right: 0; bottom: 0;
  width: 44px; height: 48px;
  display: grid; place-items: center;
  background: none; border: 0; padding: 0;
  color: var(--mist);
  cursor: pointer;
  transition: color .3s var(--ease);
}
.pwtoggle:hover, .pwtoggle:focus-visible { color: var(--gold-lt); outline: none; }
.pwtoggle .i-off { display: none; }
.pwtoggle[aria-pressed="true"] .i-on  { display: none; }
.pwtoggle[aria-pressed="true"] .i-off { display: block; }