/* ==========================================================================
   Contact page — layered on top of style.css
   Reuses the global tokens, nav, brand, .btn, .reveal and footer.
   ========================================================================== */

/* .slab and the serif body face are redeclared here rather than pulled out of
   the other page stylesheets, so those pages stay untouched. */
:root {
  --f-slab:       'Alfa Slab One', Georgia, serif;
  --f-serif-body: 'Lora', Georgia, 'Times New Roman', serif;
}

.slab {
  display: block;
  font-family: var(--f-slab);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .015em;
  line-height: 1;
  filter: url(#distress-heavy);
}
.slab--accent { color: var(--red); }

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


/* ==========================================================================
   The signature booking CTA
   An editorial lockup rather than a pill button: stacked display type, a
   drawing rule, and an arrow that travels on hover.
   ========================================================================== */
.bookcta {
  position: relative;
  display: inline-flex;
  align-items: flex-end;
  gap: 22px;
  padding: 0 2px 16px;
  color: var(--white);
  text-decoration: none;
  transition: color .4s var(--ease);
}

.bookcta__lines { display: block; }

.bookcta__line {
  display: block;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.5vw, 2.05rem);
  line-height: 1.02;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.bookcta__line--accent {
  color: var(--red);
  transition: color .4s var(--ease);
}

.bookcta__arrow {
  display: block;
  width: 46px;
  margin-bottom: .34em;
  color: var(--red);
  transition: transform .45s var(--ease), color .4s var(--ease);
}
.bookcta__arrow svg {
  display: block;
  width: 100%; height: auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* the rule draws across on hover */
.bookcta__rule {
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: rgba(255, 255, 255, .22);
}
.bookcta__rule::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .55s var(--ease);
}

.bookcta:hover .bookcta__rule::after,
.bookcta:focus-visible .bookcta__rule::after { transform: scaleX(1); }
.bookcta:hover .bookcta__arrow,
.bookcta:focus-visible .bookcta__arrow { transform: translateX(9px); }
.bookcta:hover .bookcta__line--accent { color: var(--white); }

.bookcta--compact { gap: 16px; }
.bookcta--compact .bookcta__line { font-size: clamp(1.15rem, 1.7vw, 1.4rem); }
.bookcta--compact .bookcta__arrow { width: 34px; }

.bookcta--large .bookcta__line { font-size: clamp(1.9rem, 3.6vw, 3rem); }
.bookcta--large .bookcta__arrow { width: 58px; }


/* ==========================================================================
   Contact hero
   ========================================================================== */
.chero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  background: var(--black);
  overflow: hidden;
  padding: calc(var(--nav-h) + 46px) 0 140px;
}

.chero__photo {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 58%;
}
.chero__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* near-square source; this keeps her face and the full figure in frame */
  object-position: 50% 40%;
}

/* The frame is already a dark stage shot whose own left edge falls away to
   near-black, so the ramp can be short: it clears by 38% and leaves her face
   (which sits around 31–53% across the panel) essentially untouched. */
.chero__grade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      var(--black)          0%,
      var(--black)          4%,
      rgba(10,10,10,.82)   10%,
      rgba(10,10,10,.5)    17%,
      rgba(10,10,10,.24)   24%,
      rgba(10,10,10,.08)   30%,
      rgba(10,10,10,0)     38%),
    linear-gradient(0deg,  rgba(10,10,10,.4) 0%, rgba(10,10,10,0) 22%),
    linear-gradient(180deg, rgba(10,10,10,.32) 0%, rgba(10,10,10,0) 14%);
}

.chero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1420px;
  margin-inline: auto;
  padding-inline: 44px;
}

.chero__title {
  margin: 20px 0 0;
  font-size: clamp(3.3rem, 7.4vw, 6.4rem);
  line-height: .86;
}
.chero__title .script {
  margin-top: .06em;
  margin-left: .04em;
  font-size: clamp(2.1rem, 4.2vw, 3.5rem);
  line-height: .95;
}

.chero__lede {
  max-width: 34ch;
  margin: 28px 0 38px;
  font-family: var(--f-serif-body);
  font-size: 16.5px;
  line-height: 1.72;
  color: var(--text);
}

.chero__tear {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  z-index: 3;
  width: 100%;
  height: 104px;
  fill: var(--black);
}


/* ==========================================================================
   Intro
   ========================================================================== */
.cintro {
  position: relative;
  padding: 92px 0 20px;
  background: var(--black);
}
.cintro__inner {
  position: relative;
  max-width: 660px;
  margin-inline: auto;
  text-align: center;
}

.cintro__flame {
  position: absolute;
  top: -46px; left: 50%;
  width: 62px; height: 104px;
  margin-left: -31px;
  color: var(--red);
  opacity: .5;
  pointer-events: none;
}

.cintro__title {
  margin: 0 0 16px;
  font-size: clamp(2.2rem, 4.3vw, 3.4rem);
  line-height: .96;
}
.cintro__title .slab { margin-top: .04em; }

.cintro__lede {
  margin: 0;
  font-family: var(--f-serif-body);
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--muted);
}


/* ==========================================================================
   What can be booked — numbered editorial rows, not cards
   ========================================================================== */
.offers { padding: 62px 0 78px; background: var(--black); }

.offer-list { margin: 0; padding: 0; list-style: none; }

.offer {
  display: grid;
  grid-template-columns: 78px minmax(0, 300px) minmax(0, 1fr);
  align-items: baseline;
  gap: 0 30px;
  padding: 26px 4px;
  border-top: 1px solid var(--line);
  transition: background-color .4s var(--ease);
}
.offer:last-child { border-bottom: 1px solid var(--line); }
.offer:hover { background: rgba(255, 255, 255, .018); }

.offer__index {
  font-family: var(--f-ui);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .28em;
  color: var(--red);
}

.offer__title {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(1.25rem, 2vw, 1.65rem);
  line-height: 1.05;
  letter-spacing: .015em;
  text-transform: uppercase;
  color: var(--white);
}

.offer__text {
  margin: 0;
  font-family: var(--f-serif-body);
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--muted);
}


/* ==========================================================================
   Booking information
   ========================================================================== */
.enquiry { padding: 18px 0 90px; background: var(--black); }

.enquiry__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 62px;
  align-items: start;
}

.enquiry__title {
  margin: 0 0 16px;
  font-size: clamp(2rem, 3.7vw, 2.9rem);
  line-height: .96;
}
.enquiry__title .slab { margin-top: .04em; }

.enquiry__lede {
  max-width: 46ch;
  margin: 0 0 24px;
  font-family: var(--f-serif-body);
  font-size: 15px;
  line-height: 1.74;
  color: var(--muted);
}

.enquiry__list { margin: 0; padding: 0; list-style: none; }
.enquiry__list li {
  position: relative;
  padding: 11px 0 11px 24px;
  font-family: var(--f-body);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text);
  border-bottom: 1px solid var(--line-soft);
}
.enquiry__list li:last-child { border-bottom: 0; }
.enquiry__list li::before {
  content: "";
  position: absolute;
  left: 2px; top: 50%;
  width: 10px; height: 1px;
  background: var(--red);
}

/* the card */
.enquiry__card {
  padding: 34px 32px 32px;
  border: 1px solid rgba(230, 48, 48, .4);
  background: linear-gradient(180deg, rgba(230,48,48,.045) 0%, rgba(10,10,10,0) 62%);
}

.enquiry__label {
  margin: 0 0 12px;
  font-family: var(--f-body);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--red);
}

.enquiry__email {
  display: inline-block;
  margin-bottom: 16px;
  font-family: var(--f-ui);
  font-weight: 400;
  font-size: clamp(1.05rem, 1.8vw, 1.4rem);
  line-height: 1.3;
  color: var(--white);
  word-break: break-word;
  border-bottom: 1px solid rgba(255, 255, 255, .25);
  padding-bottom: 3px;
  transition: color .32s var(--ease), border-color .32s var(--ease);
}
.enquiry__email:hover,
.enquiry__email:focus-visible {
  color: var(--red);
  border-bottom-color: rgba(230, 48, 48, .7);
}

.enquiry__note {
  margin: 0 0 26px;
  font-family: var(--f-serif-body);
  font-size: 13.5px;
  font-style: italic;
  line-height: 1.65;
  color: var(--muted-2);
}


/* ==========================================================================
   Follow the journey
   ========================================================================== */
.social { padding: 0 0 88px; background: var(--black); }

.social__title {
  margin: 0 0 34px;
  font-size: clamp(2rem, 3.9vw, 3rem);
  line-height: .96;
}
.social__title .slab { margin-top: .04em; }

.social__list { margin: 0; padding: 0; list-style: none; }

.sitem { border-top: 1px solid var(--line); }
.sitem:last-child { border-bottom: 1px solid var(--line); }

.sitem a {
  display: grid;
  grid-template-columns: 78px minmax(0, 220px) minmax(0, 1fr) 40px;
  align-items: center;
  gap: 0 30px;
  padding: 24px 4px;
  color: inherit;
  transition: padding-left .4s var(--ease), background-color .4s var(--ease);
}
.sitem a:hover,
.sitem a:focus-visible {
  padding-left: 14px;
  background: rgba(255, 255, 255, .018);
}

.sitem__index {
  font-family: var(--f-ui);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .28em;
  color: var(--red);
}

.sitem__name {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  letter-spacing: .015em;
  text-transform: uppercase;
  color: var(--white);
}

.sitem__handle {
  font-family: var(--f-serif-body);
  font-size: 14.5px;
  color: var(--muted);
  word-break: break-word;
  transition: color .32s var(--ease);
}
.sitem a:hover .sitem__handle { color: var(--text); }

.sitem__arrow {
  justify-self: end;
  font-size: 19px;
  line-height: 1;
  color: var(--red);
  transition: transform .4s var(--ease);
}
.sitem a:hover .sitem__arrow { transform: translateX(6px); }


/* ==========================================================================
   Closing
   ========================================================================== */
.cclose { padding: 0 0 100px; background: var(--black); }

.cclose__inner {
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
  padding-top: 58px;
  border-top: 1px solid rgba(230, 48, 48, .28);
}

.cclose__title {
  margin: 0 0 16px;
  font-size: clamp(2rem, 3.9vw, 3rem);
  line-height: .96;
}
.cclose__title .slab { margin-top: .04em; }

.cclose__lede {
  margin: 0 0 34px;
  font-family: var(--f-serif-body);
  font-size: 15.5px;
  line-height: 1.72;
  color: var(--muted);
}

/* centre the closing CTA */
.cclose .bookcta { justify-content: center; text-align: left; }


/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1080px) {
  .chero__content { padding-inline: 28px; }
  .enquiry__grid { gap: 44px; }
  .offer { grid-template-columns: 62px minmax(0, 250px) minmax(0, 1fr); gap: 0 22px; }
  .sitem a { grid-template-columns: 62px minmax(0, 190px) minmax(0, 1fr) 34px; gap: 0 22px; }
}

@media (max-width: 900px) {
  .chero {
    align-items: flex-end;
    padding: calc(var(--nav-h) + 200px) 0 126px;
  }
  .chero__photo { width: 100%; }
  /* full-width panel crops hard horizontally — bias the window onto her face */
  .chero__photo img { object-position: 40% 50%; }
  .chero__grade {
    background:
      linear-gradient(0deg, var(--black) 22%, rgba(10,10,10,.68) 44%, rgba(10,10,10,.08) 70%),
      linear-gradient(180deg, rgba(10,10,10,.32) 0%, rgba(10,10,10,0) 20%);
  }
  .chero__title { font-size: clamp(2.9rem, 12vw, 4.7rem); }
  .chero__title .script { font-size: clamp(1.9rem, 7.4vw, 2.9rem); }
  .chero__lede { max-width: 32ch; }
  .chero__tear { height: 64px; }

  .cintro { padding-top: 70px; }
  .offers { padding: 50px 0 62px; }
  .enquiry { padding-bottom: 72px; }
  .enquiry__grid { grid-template-columns: 1fr; gap: 40px; }
  .social { padding-bottom: 70px; }
}

@media (max-width: 600px) {
  .chero__content { padding-inline: 22px; }
  .chero { padding-top: calc(var(--nav-h) + 158px); }
  .chero__lede { max-width: 30ch; font-size: 15.5px; }

  .cintro__inner,
  .cclose__inner { max-width: 100%; }

  /* stack the numbered rows */
  .offer {
    grid-template-columns: 1fr;
    gap: 7px;
    padding: 22px 2px;
  }
  .offer__index { letter-spacing: .3em; }

  .sitem a {
    grid-template-columns: 1fr 30px;
    grid-template-areas:
      "idx  arrow"
      "name arrow"
      "handle arrow";
    gap: 5px 12px;
    padding: 20px 2px;
  }
  .sitem__index  { grid-area: idx; }
  .sitem__name   { grid-area: name; }
  .sitem__handle { grid-area: handle; font-size: 13.5px; }
  .sitem__arrow  { grid-area: arrow; align-self: center; }
  .sitem a:hover { padding-left: 8px; }

  .enquiry__card { padding: 26px 22px 26px; }
  .enquiry__email { font-size: 1.02rem; }

  .bookcta { gap: 16px; }
  .bookcta--large .bookcta__line { font-size: 1.75rem; }
  .bookcta--large .bookcta__arrow { width: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .bookcta__rule::after,
  .bookcta__arrow,
  .sitem a,
  .sitem__arrow { transition: none; }
}