/* ═══════════════════════════════════════════════════════
   HOSPITALITY PAGE — Page-Specific Styles
   ═══════════════════════════════════════════════════════ */

/* ── 1. Hero (dark image, centred heading) ────────── */
.hp-hero {
  position: relative;
  height: 62vh;
  min-height: 420px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hp-hero__bg { position: absolute; inset: 0; }
.hp-hero__bg img { width: 100%; height: 100%; object-fit: cover; }

.hp-hero__overlay {
  position: absolute;
  inset: 0;
  background: rgba(35, 31, 32, 0.45);
}

.hp-hero__content { position: relative; z-index: 1; text-align: center; }

.hp-hero__heading {
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 2.6486vw, 3.1775rem);
  font-weight: 700;
  line-height: 1.1;
  color: #fff;
  max-width: 900px;
  margin: 0 auto;
}

.hp-hero__heading em { font-style: italic; }

/* ── 2 & 4. Split text/image sections ─────────────── */
.hp-split__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* text col 170-920, image col 1053-1796 -> 80px gutter */
  gap: clamp(2rem, 3.4194vw, 4.1rem);
  align-items: start;
}

.hp-split__heading {
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 2.4764vw, 2.9725rem);
  font-weight: 700;
  line-height: 1.05;
  margin-bottom: 1.5rem;
}
.hp-split__desc {
  font-size: clamp(1.0625rem, 1.1103vw, 1.3325rem);
  line-height: 1.4;
  color: var(--color-text);
  margin-bottom: 1.25rem;
}

.hp-split__desc:last-of-type {
  margin-bottom: 2rem;
}

/* the intro image is 3:4; the "challenges" image below is squarer —
   measured 531x561 (0.947) on all three sector mockups */
.hp-split:not(.hp-split--light) .hp-split__img { aspect-ratio: 531 / 561; }

.hp-split__img {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 0;
}

/* ── 3. Who we work with (dark numbered list) ─────── */
.hp-segments { background: var(--color-dark); color: #fff; }
.hp-segments .section-label { color: var(--color-copper-light); }
.hp-segments .section-label::before { background: var(--color-copper-light); }

.hp-segments__list { border-top: none; }

.hp-segments__row {
  /* num 170-274 | title 314-1059 | desc 1099-1750, 40px gutters */
  display: grid;
  grid-template-columns: 104px minmax(0, 1.145fr) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: start;
  padding: 3.125rem 0;
  border-bottom: none;
}

.hp-segments__num {
  font-family: var(--font-sans);
  font-size: clamp(1rem, 1.1103vw, 1.3325rem);
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--color-copper);
  padding-top: 1.8rem;
}

.hp-segments__title {
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 2.4764vw, 2.9725rem);
  font-weight: 700;
  line-height: 1.05;
  color: #fff;
}

.hp-segments__desc {
  font-size: clamp(1.0625rem, 1.1103vw, 1.3325rem);
  line-height: 1.4;
  color: var(--color-text-muted-on-dark);
}

/* ── 5. Services (dark accordion) ─────────────────── */
.hp-services { background: var(--color-dark); color: #fff; }
.hp-services .section-label { color: #fff; }
.hp-services .section-label::before { background: #fff; }

.hp-services__heading {
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 2.4764vw, 2.9725rem);
  font-weight: 700;
  line-height: 1.05;
  color: #fff;
  max-width: 820px;
  margin-bottom: clamp(2rem, 3.28vw, 2.46rem);
}

/* reuse the FAQ accordion, recoloured for the dark band */
.hp-services__list .faq__item { border-bottom: 1px solid var(--color-copper); }
.hp-services__list .faq__item:first-child { border-top: 1px solid var(--color-copper); }

.hp-services__list .faq__question-text {
  font-size: clamp(1.125rem, 1.3243vw, 1.5887rem);
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.2;
}

.hp-services__list .faq__question { flex-direction: row-reverse; justify-content: flex-end; gap: 1.25rem; }
.hp-services__list .faq__icon::before,
.hp-services__list .faq__icon::after { background: #fff; }
.hp-services__list .faq__answer p { color: #fff; padding-left: 5.25rem; }

.hp-services__cta {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.46vw, 1.64rem);
  flex-wrap: wrap;
  margin-top: clamp(2rem, 3.28vw, 2.46rem);
}

.hp-services__cta-text {
  font-family: var(--font-serif);
  font-size: clamp(1.375rem, 1.7056vw, 2.05rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
}

/* ── 6. Featured project band ─────────────────────── */
.hp-fullimage {
  position: relative;
  height: clamp(360px, 55.64vw, 760px);   /* featured band is 760px on all three mockups */
  overflow: hidden;
}

.hp-fullimage img { width: 100%; height: 100%; object-fit: cover; }

.hp-fullimage__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(1.5rem, 3.28vw, 2.87rem) var(--gutter);
  background: linear-gradient(to bottom,
              rgba(35, 31, 32, 0.35) 0%,
              rgba(35, 31, 32, 0) 22%,
              rgba(35, 31, 32, 0) 72%,
              rgba(35, 31, 32, 0.35) 100%);
}

.hp-fullimage__overlay .section-label { color: rgba(255,255,255,0.9); margin-bottom: 0; }
.hp-fullimage__overlay .section-label::before { background: var(--color-copper); }

.hp-fullimage__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.hp-fullimage__dots { display: flex; gap: 0.5rem; }

.hp-fullimage__dot {
  width: clamp(48px, 3.8868vw, 74.62px);
  height: 5px;
  background: rgba(255, 255, 255, 0);
  border: 1px solid rgba(255, 255, 255, 0.85);
}

.hp-fullimage__dot.active { background: #fff; }

/* ── 7. Process ────────────────────────────────────── */
.hp-process__grid {
  display: grid;
  /* rail sits at x901 of a 170-1750 content box -> left column 46.3% */
  grid-template-columns: 46.3% 1fr;
  gap: 0;
  align-items: start;
}

.hp-process__intro {
  position: sticky;
  top: 140px;
}

.hp-process__heading {
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 2.4764vw, 2.9725rem);
  font-weight: 700;
  line-height: 1.05;
  margin-bottom: 2rem;
}

.hp-process__img {
  aspect-ratio: 4 / 3;
  max-width: 538px;
  overflow: hidden;
}

.hp-process__step {
  padding: 0 0 5.1rem 2.25rem;   /* mockup step pitch ~190px */
  margin-bottom: 0;
  border-left: 3px solid #D6D1C4;
  color: #C2B7AB;
  border-top: none;
  transition: color 0.4s var(--ease-out), border-color 0.4s var(--ease-out);
}

.hp-process__step:last-child {
  border-bottom: 1px solid var(--color-border);
}

.hp-process__num {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(1.375rem, 2.214vw, 2.665rem);   /* matches Workplace and the mockup */
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: inherit;
  line-height: 1.1;
  margin-bottom: 0.4rem;
}
.hp-process__desc {
  font-size: clamp(1.0625rem, 1.1956vw, 1.435rem);
  line-height: 1.41;                             /* mockup line pitch 23px */
  color: var(--color-text);
  max-width: 560px;
}

/* ── 8. CTA band (copper) ─────────────────────────── */
.hp-cta-band {
  background: var(--color-copper);
  color: #fff;
  padding: clamp(48px, 5vw, 72px) 0;
  /* the mockup band is 560px tall on all three sector pages regardless of
     how tall the guide cover is — pin it so they stay consistent */
  min-height: clamp(420px, 41vw, 560px);
  /* column flex centres the block vertically while still stretching
     .container to full width — grid left it sized to its own content */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* .container has margin:0 auto — inside a flex parent those auto margins
   stop it stretching, so pin it to full width */
.hp-cta-band > .container { width: 100%; }

.hp-cta-band__grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(2.5rem, 4.1vw, 3.28rem);
  align-items: center;
}

.hp-cta-band__heading {
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 2.4764vw, 2.9725rem);
  font-weight: 700;
  line-height: 1.05;
  margin-bottom: 1.25rem;
}

.hp-cta-band__desc {
  font-size: clamp(1.0625rem, 1.1956vw, 1.435rem);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 2rem;
  max-width: 480px;
}

.hp-cta-band .btn--dark {
  background: var(--color-dark);
  border-color: var(--color-dark);
  color: #fff;
}

.hp-cta-band .btn--dark::before {
  background: #fff;
}

.hp-cta-band .btn--dark:hover {
  color: var(--color-dark);
}

.hp-cta-band__img {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(35, 31, 32, 0.28);
}

/* ── 12. Hospitality projects grid ────────────────── */
.hp-projects__heading {
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 2.4764vw, 2.9725rem);
  font-weight: 700;
  line-height: 1.05;
  margin-bottom: clamp(2rem, 3.28vw, 2.46rem);
}

.hp-projects__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.hp-project {
  display: block;
}

.hp-project__img {
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: 4px;
  margin-bottom: 1.25rem;
}

.hp-project__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease-out);
}

.hp-project:hover .hp-project__img img {
  transform: scale(1.05);
}

.hp-project__tag {
  display: block;
  font-size: 0.9225rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-copper);
  margin-bottom: 0.5rem;
}

.hp-project__title {
  font-family: var(--font-serif);
  font-size: 1.3366rem;
  font-weight: 600;
  line-height: 1.08;
}

/* ── Responsive ───────────────────────────────────── */
@media (max-width: 1024px) {
  .hp-segments__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .hp-services__grid {
    grid-template-columns: 1fr;
  }

  .hp-process__grid {
    grid-template-columns: 1fr;
  }

  .hp-process__intro {
    position: static;
  }

  .hp-cta-band__grid {
    grid-template-columns: 1fr;
  }

  .hp-cta-band__img {
    order: -1;
  }
}

@media (max-width: 768px) {
  .hp-split__grid {
    grid-template-columns: 1fr;
  }

  .hp-split__img {
    order: -1;
  }

  .hp-segments__grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .hp-projects__grid {
    grid-template-columns: 1fr;
  }
}

.hp-services__list { max-width: 1250px; }

/* ── Parity with the Workplace template ────────────────
   Same measured treatments: light band on the first split, continuous
   process rail, filled/outlined progress bars, dark CTA button. */
.hp-split--light { background: var(--color-surface-light); }
.hp-process      { background: var(--color-surface-light); }

.hp-split__img img,
.hp-process__img img,
.hp-cta-band__img img { width: 100%; height: 100%; object-fit: cover; }

.hp-process__step:last-child { padding-bottom: 0; }
.hp-process__step.is-active  { border-left-color: var(--color-copper); color: var(--color-text); }
.hp-process__num  { color: inherit; }
.hp-process__desc { color: inherit; max-width: 810px; }

.hp-fullimage__dot.active { background: #fff; border-color: #fff; }
.hp-fullimage__dots { gap: 0.75rem; }

/* row pitch measured at 98px on the mockup: 35px padding + 26.5px line box */
.hp-services__list .faq__question { padding-top: 2.2rem; padding-bottom: 2.2rem; gap: 3.375rem; }
.hp-services__list .faq__icon { width: 30px; height: 30px; }
.hp-services__list .faq__icon::before { height: 2px; }
.hp-services__list .faq__icon::after  { width: 2px; }
.hp-services__list .faq__item.active .faq__answer { max-height: 640px; padding-bottom: 3rem; }
.hp-services__list .faq__answer p { color: #fff; max-width: 1060px; padding-left: 5.25rem; }

/* Sub-services listed beneath an open entry (Strategy in the design) */
.hp-services__bullets {
  list-style: none;
  margin: 1rem 0 0;
  padding-left: 5.25rem;
  color: #fff;
  max-width: 1060px;
}

.hp-services__bullets li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.5rem;
  line-height: 1.5;
}

.hp-services__bullets li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--color-copper-light);
}

.hp-segments__desc { color: #fff; }
.hp-segments__title { color: #fff; }

.hp-cta-band .btn--dark { background: var(--color-dark); border-color: var(--color-dark); color: #fff; }
.hp-cta-band .btn--dark::before { background: #fff; }
.hp-cta-band .btn--dark:hover { color: var(--color-dark); border-color: #fff; }

@media (max-width: 1024px) {
  .hp-process__grid { grid-template-columns: 1fr; gap: 3rem; }
  .hp-services__list .faq__answer p { padding-left: 0; }
  .hp-services__bullets { padding-left: 0; }
}

/* rules sit between rows only — never above the first or below the last */
.hp-segments__row + .hp-segments__row {
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

@media (max-width: 768px) {
  .hp-segments__row { grid-template-columns: 1fr; gap: 1rem; padding: 2.25rem 0; }
  .hp-segments__num { padding-top: 0; }
  .hp-split__grid { grid-template-columns: 1fr; }
  .hp-split__img { order: -1; }
}

/* ── 8b. Guide cover in the CTA band ──────────────────
   The band is a guide download, not a photo feature: the mockup shows an
   upright magazine cover sitting right of the copy, lifted off the copper
   with a drop shadow. Overrides the 16/9 photo ratio above. */
.hp-cta-band__img--guide {
  aspect-ratio: 252 / 361;      /* measured off the mockup */
  max-width: 252px;
  margin-left: auto;
  box-shadow: 0 22px 48px rgba(35, 31, 32, 0.32);
}

.hp-cta-band__img--guide img { object-fit: cover; }

@media (max-width: 1024px) {
  .hp-cta-band__img--guide { margin: 0 auto; }
}

/* 22 Sept: the Our Process line drawing fades into the finished photograph as the section
   scrolls into view. Both images share the frame with the drawing on top, so the photograph is
   already there rather than loading in mid-fade. Timings follow the supplied demo. */
.hp-process__img {
  position: relative;
}

.hp-process__img img {
  position: absolute;
  inset: 0;
}

.hp-process__drawing {
  opacity: 1;
  transition: opacity 3s cubic-bezier(0.45, 0, 0.25, 1);
  transition-delay: 0.3s;
}

.hp-process__img.is-coloured .hp-process__drawing {
  opacity: 0;
}

/* Anyone who has asked their system to reduce motion gets a quick fade instead. */
@media (prefers-reduced-motion: reduce) {
  .hp-process__drawing {
    transition-duration: 0.4s;
    transition-delay: 0s;
  }
}