/* ==========================================================================
   Reviews — the line, and the form.

   Logan, 24 Sep 2026: the boxes were too big and too much of a zone of
   their own; he asked for a compact, space-efficient layout that sits in
   the page. So a review is no longer a box. It is one line of proof under
   Start a Request: a small label, the stars, the words, then the name and
   the place on one line. One review shows at a time; when there is more
   than one, a small pair of arrows and a count sit underneath.

   Every word is white at full opacity. Rank comes from size, weight and
   tracking, never from grey.
   ========================================================================== */

.rb{
  background:var(--ink);color:#fff;text-align:center;
  padding:0 24px clamp(72px,10vw,112px);
}
/* no reviews, no line (reviews.js does the same for old browsers) */
.rb:not(:has(.rv__card)){display:none}

.rb__heading{
  margin:0 0 18px;
  font-size:.8125rem;font-weight:700;line-height:1.2;
  letter-spacing:.2em;text-transform:uppercase;color:#fff;
}

/* one review wide; swipes on a phone, drags on a trackpad, takes the
   arrow keys, all without script */
.rb__rail{
  max-width:44rem;margin:0 auto;
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;
  overscroll-behavior-x:contain;
}
.rb__rail::-webkit-scrollbar{display:none}
.rb__rail:focus-visible{outline:2px solid #fff;outline-offset:6px}
.rb__track{display:flex}

.rv__card{flex:0 0 100%;scroll-snap-align:center;padding:0 2px}

/* the member's own photo, when they send one: a small square above the
   stars, never a frame of its own */
.rv__plate{display:block;width:44px;height:44px;object-fit:cover;margin:0 auto 14px;background:#161616}

.rv__stars{display:flex;justify-content:center;gap:4px;margin:0 0 14px}
.rv__stars svg{width:13px;height:13px;display:block;fill:#fff;flex:none}
.rv__stars svg.is-off{fill:none;stroke:#fff;stroke-width:1.4}

.rv__quote{
  margin:0 auto 14px;max-width:36rem;
  font-size:clamp(1.125rem,2vw,1.3125rem);line-height:1.5;color:#fff;
  text-wrap:balance;
}
.rv__quote::before{content:"\201C"}
.rv__quote::after{content:"\201D"}

/* name and place share one line */
.rv__by,.rv__meta{
  display:inline;margin:0;
  font-size:.8125rem;line-height:1.5;letter-spacing:.14em;
  text-transform:uppercase;color:#fff;
}
.rv__by{font-weight:700}
.rv__meta{font-weight:400}
.rv__by + .rv__meta::before{content:"\00B7";margin:0 .7em}

/* the arrows and the count, only when there is somewhere to go */
.rb__nav{display:flex;align-items:center;justify-content:center;gap:16px;margin:22px 0 0}
.rb__nav[hidden]{display:none}
.rb__nav button{
  width:36px;height:36px;border:1px solid #ffffff59;border-radius:0;
  background:none;color:#fff;cursor:pointer;display:grid;place-items:center;padding:0;
}
.rb__nav button:hover{border-color:#fff}
.rb__nav button:focus-visible{outline:2px solid #fff;outline-offset:3px}
.rb__nav button:disabled{border-color:#ffffff26;color:#ffffff40;cursor:default}
.rb__nav svg{width:15px;height:15px;display:block;fill:none;stroke:currentColor;stroke-width:1.6}
.rb__count{
  margin:0;min-width:4.6em;
  font-size:.8125rem;font-weight:700;letter-spacing:.14em;color:#fff;
  font-variant-numeric:tabular-nums;
}

/* ==========================================================================
   The form, in the same language: outlined fields on ink, and the four
   steps numbered, because leaving a review here is a sequence and the
   numbers are what make it read as work worth doing.
   ========================================================================== */

.rv{
  background:var(--ink);color:#fff;
  padding:clamp(72px,12vw,128px) 0 clamp(64px,10vw,104px);
}
/* under the band the section break is the band's own bottom rule */
.rb:has(.rv__card) + .rv{padding-top:0}
.rv__wrap{max-width:74rem;margin:0 auto}
.leave{max-width:40rem;margin:0 auto;padding:0 24px}

.leave__eyebrow{
  margin:0;text-align:center;
  font-size:.9375rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;
}
.leave__heading{
  margin:.4em 0 0;text-align:center;
  font-family:Perandory,Georgia,serif;font-weight:400;
  font-size:clamp(1.9rem,6.4vw,2.5rem);line-height:1.12;letter-spacing:.03em;
  text-transform:uppercase;color:#fff;
}
.leave__lede{
  margin:1em auto clamp(36px,6vw,52px);max-width:22rem;text-align:center;
  font-size:1.0625rem;line-height:1.55;
}
.leave__note{
  margin:22px 0 0;font-size:.9375rem;line-height:1.55;
}

.field{margin:0 0 26px}
.field label,.leave__legend{
  display:flex;align-items:baseline;gap:.7em;margin:0 0 .6em;
  letter-spacing:.04em;text-transform:uppercase;color:#fff;
  font-size:.9375rem;font-weight:700;
}
/* the step number: the one piece of structure, and it counts something real */
.field__no{
  font-style:normal;font-size:.8125rem;font-weight:400;letter-spacing:.1em;
  color:#fff;flex:none;
}
.field__hint{
  margin-left:auto;font-weight:400;text-transform:none;letter-spacing:0;
  font-size:.875rem;color:#fff;
}

.field input,.field textarea{
  width:100%;display:block;
  font-family:Figtree,system-ui,sans-serif;font-size:1.0625rem;line-height:1.6;
  color:#fff;background:none;
  border:1px solid #ffffff2e;border-radius:0;
  padding:16px 18px;
  transition:border-color .2s ease;
}
.field textarea{min-height:150px;resize:vertical}
.field input:hover,.field textarea:hover{border-color:#ffffff59}
.field input:focus,.field textarea:focus{outline:none;border-color:#fff}
.field.is-missing input,.field.is-missing textarea{border-color:#c4553d}
.field__help{margin:.6em 0 0;font-size:.875rem;line-height:1.5;color:#fff}

.rating{margin:0 0 26px}
.rating__stars{display:flex;gap:8px}
.rating__stars button{background:none;border:0;padding:2px;cursor:pointer;line-height:0}
.rating__stars svg{width:28px;height:28px;display:block;fill:none;stroke:#fff;stroke-width:1.2;transition:fill .15s ease}
.rating__stars button.is-on svg{fill:#fff}
.rating__stars button:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* the send block, inverted: bone on ink, the same slab the page uses */
.rv__send{
  width:100%;display:block;border:1px solid #fff;border-radius:0;cursor:pointer;
  margin:clamp(30px,5vw,40px) 0 0;padding:26px 20px;
  background:none;color:#fff;
  font-family:Figtree,system-ui,sans-serif;
  font-size:clamp(1.25rem,4.6vw,1.5rem);font-weight:700;letter-spacing:.02em;
}
.rv__send:hover{background:#fff;color:var(--ink)}
.rv__send:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* the bots-only field: off screen, out of the tab order */
.field--trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* when the site can't be reached: one line, and the WhatsApp way out */
.rv__fail{margin:18px 0 0;font-size:.9375rem;line-height:1.55;color:#fff}
.rv__fail a,.sent__note a{color:#fff;text-decoration:underline;text-underline-offset:3px}

/* received: the form steps aside and their review is set back to them
   in the live line's own classes (.rv__stars, .rv__quote, .rv__who) */
.sent{text-align:center}
.sent .leave__heading:focus{outline:none}
.sent__echo{
  margin:clamp(36px,6vw,52px) auto 0;padding:clamp(30px,5vw,40px) 0;max-width:30rem;
  border-top:1px solid #ffffff2e;border-bottom:1px solid #ffffff2e;
}
.sent__echo .rv__quote{white-space:pre-line;overflow-wrap:anywhere}
.sent__note{margin-top:28px}
.sent__note a{white-space:nowrap}
@media (prefers-reduced-motion:no-preference){
  .sent:not([hidden]){animation:sent-in .5s ease both}
  @keyframes sent-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
}

@media (prefers-reduced-motion:reduce){
  .rb__rail{scroll-behavior:auto}
  .field input,.field textarea,.rv__send,.rating__stars svg{transition:none}
}

/* ==========================================================================
   The request panel, and the footer's second line. Unchanged by the
   reviews rebuild — kept here because this is the page's hand-written
   stylesheet.
   ========================================================================== */

/* The four paragraphs under the request line are gone, so the line is no
   longer a paragraph — it is the statement. It takes the panel's own pull
   treatment: centred, balanced, held short. */
.panel--request .panel__pull{margin-top:0;max-width:32rem;margin-left:auto;margin-right:auto}
.panel--request .panel__cta{margin-top:clamp(28px,5vw,40px);margin-bottom:0}
.panel--request{padding-bottom:clamp(48px,7vw,72px)}

/* The footer already sets one pair — a line of text, then a link. This is
   the second pair, held a little clear of the first so they read as two. */
.site-foot__reach{margin-top:18px!important}
.site-foot__tel{letter-spacing:.02em;font-variant-numeric:tabular-nums}

/* ==========================================================================
   Black, end to end. Logan, 24 Sep 2026: "everything should be black,
   unless it's a background image or other design element. No more white /
   cream background blocks." The About and Request panels were bone; they
   now sit on the same ink as every other section, so the page reads as one
   surface and nothing flips from black to white. Buttons are outlined in
   white and fill white under the pointer.
   ========================================================================== */
.aihs{background:var(--ink);color:#fff}
.panel{background:var(--ink);color:#fff}
.panel__heading,.panel__body,.panel__pull,.panel__note,.panel__list-label,
.panel__list li,.panel__signature{color:#fff}
.panel__list li{border-bottom-color:#ffffff2e}
.panel__cta{background:none;color:#fff;border:1px solid #fff}
.panel__cta:hover{background:#fff;color:var(--ink)}
.panel__cta:focus-visible{outline:2px solid #fff;outline-offset:3px}
.site-foot{color:#fff}
/* With no colour change to mark the break, the season carousel's own foot
   room is enough; the request panel's full top padding would stack on it
   and leave a dead band of black. */
.panel--request{padding-top:clamp(24px,4vw,48px)}
.site-foot__copy{opacity:1}   /* was .75 in the bundle: no grey text */

/* Each review sits in the middle of the rail's height, so a short one
   beside a long one doesn't leave a gap under its name. reviews.js wraps
   the name and place in .rv__who so they stay on one line. */
.rv__card{display:flex;flex-direction:column;justify-content:center}
.rv__who{margin:0}
/* The same at the other end: About runs straight into the city ring, and
   its padding, the pull line's margin and the ring's own top padding
   stacked to 320px of nothing. */
#about{padding-bottom:clamp(24px,2.5vw,32px)}
#about .panel__pull{margin-bottom:0}