/* ==========================================================================
   Quintessential Paris — homepage and contact page.
   Shared page chrome (reset, layout, buttons, header, footer, forms) lives in
   base.css; this file only adds the page sections it styles.
   Every value comes from tokens.css. No raw colours or sizes below.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  height: 82vh; min-height: 560px;
  overflow: hidden;
  background: var(--qp-ink);
}
.hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 0%;
  transform: scale(1.95); transform-origin: 50% 0%;
  filter: saturate(0.72) contrast(1.02);
}
.hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(105deg,
    var(--qp-scrim-strong) 0%,
    var(--qp-scrim-mid) 52%,
    var(--qp-scrim-light) 100%);
}
.hero__inner {
  position: relative;
  height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-bottom: 56px;
}
.hero__eyebrow { margin-bottom: 26px; }
.hero__title {
  font-family: var(--qp-font-display);
  font-weight: 400;
  font-size: var(--qp-size-display);
  line-height: 1.06;
  letter-spacing: -0.01em;
  color: var(--qp-text-on-dark);
  margin: 0; max-width: 15ch;
  text-wrap: balance;
}
.hero__actions {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 14px; margin-top: 38px;
}

/* --------------------------------------------------------------------------
   2. Fact strip
   -------------------------------------------------------------------------- */
.fact-strip { display: grid; grid-template-columns: repeat(4, 1fr); }
.fact { padding: 30px 28px 30px 0; border-right: 1px solid var(--qp-line); }
.fact:last-child { border-right: 0; }
.fact__value {
  font-family: var(--qp-font-display);
  font-size: 31px; line-height: 1;
  color: var(--qp-accent);
}
.fact__label {
  margin-top: 9px;
  font-size: 12px; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--qp-text-muted);
}

/* --------------------------------------------------------------------------
   3. Tag pills
   -------------------------------------------------------------------------- */
.pill-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 36px; }
.pill {
  padding: 8px 15px;
  border: 1px solid var(--qp-line);
  font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--qp-text-muted);
}

/* --------------------------------------------------------------------------
   4. Journey cards
   -------------------------------------------------------------------------- */
.journey {
  background: var(--qp-cream);
  border: 1px solid var(--qp-line);
  display: flex; flex-direction: column;
  transition: border-color var(--qp-transition);
}
.journey:hover { border-color: var(--qp-ink); }
.journey__media {
  aspect-ratio: 4 / 5;
  background: var(--qp-hatch);
  display: flex; align-items: flex-end;
  padding: 16px;
  overflow: hidden;
}
.journey__media img { width: 100%; height: 100%; object-fit: cover; }
.journey__media--photo { padding: 0; }  /* the photo fills the card; padding only frames the caption */
.journey__slot {
  font-family: var(--qp-font-mono);
  font-size: 10.5px; letter-spacing: 0.06em;
  color: var(--qp-text-faint);
  background: var(--qp-cream);
  padding: 5px 8px;
}
.journey__body {
  padding: 26px 24px 30px;
  display: flex; flex-direction: column; gap: 12px; flex: 1;
}
.journey__kicker {
  font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--qp-accent);
}
.journey__title {
  font-family: var(--qp-font-display); font-weight: 400;
  font-size: var(--qp-size-h3); line-height: 1.25; margin: 0;
}
.journey__text { margin: 0; font-size: var(--qp-size-small); color: var(--qp-text-muted); line-height: 1.68; }
.journey__meta {
  margin-top: auto; padding-top: 20px;
  border-top: 1px solid var(--qp-line);
  display: flex; justify-content: space-between;
  font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--qp-text-faint);
}

/* --------------------------------------------------------------------------
   5. Access list and ground panel
   -------------------------------------------------------------------------- */
.door {
  display: grid; grid-template-columns: 44px 1fr; gap: 22px;
  padding: 24px 0;
  border-top: 1px solid var(--qp-line);
  align-items: baseline;
}
.door__number { font-family: var(--qp-font-display); font-size: 14px; color: var(--qp-text-faint); }
.door__title {
  font-family: var(--qp-font-display); font-weight: 400;
  font-size: 20px; margin: 0 0 7px;
}
.door__text {
  margin: 0; font-size: var(--qp-size-body);
  color: var(--qp-text-muted); line-height: 1.7; max-width: 52ch;
}

.ground-panel { background: var(--qp-ink); color: var(--qp-text-on-dark); padding: 44px 38px; }
.ground-panel__lead {
  font-family: var(--qp-font-display); font-weight: 400;
  font-size: 25px; line-height: 1.34; margin: 22px 0 0;
}
.ground-panel__rule { height: 1px; background: var(--qp-line-on-dark); margin: 32px 0; }
.ground-row {
  display: flex; justify-content: space-between; gap: 18px;
  padding: 13px 0;
  font-size: 14.5px; color: var(--qp-text-on-dark-muted);
}
.ground-row__value { color: var(--qp-text-on-dark); text-align: right; }

/* --------------------------------------------------------------------------
   6. Partnership
   -------------------------------------------------------------------------- */
.step { background: var(--qp-cream); padding: 38px 34px 42px; }
.step__number {
  font-family: var(--qp-font-display);
  font-size: 13px; letter-spacing: 0.2em; color: var(--qp-accent);
}
.step__title {
  font-family: var(--qp-font-display); font-weight: 400;
  font-size: 24px; line-height: 1.26; margin: 20px 0 12px;
}
.step__text { margin: 0; font-size: var(--qp-size-body); color: var(--qp-text-muted); line-height: 1.7; }

.term { background: var(--qp-cream); padding: 26px 30px; }
.term__label {
  font-size: var(--qp-size-eyebrow); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--qp-text-faint);
}
.term__value { margin-top: 9px; font-family: var(--qp-font-display); font-size: 19px; }

/* --------------------------------------------------------------------------
   7. Testimonial and partner wall
   -------------------------------------------------------------------------- */
.quote { margin: 0; }
.quote__text {
  font-family: var(--qp-font-display); font-weight: 400;
  font-size: var(--qp-size-quote); line-height: 1.4; margin: 0;
  text-wrap: pretty;
}
.quote__source {
  margin-top: 28px;
  font-size: var(--qp-size-label); letter-spacing: var(--qp-track-nav);
  text-transform: uppercase; color: var(--qp-text-muted);
}

.logo-wall {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--qp-line); border: 1px solid var(--qp-line);
}
.logo-wall__label {
  font-size: var(--qp-size-eyebrow); letter-spacing: var(--qp-track-eyebrow);
  text-transform: uppercase; color: var(--qp-text-faint); margin-bottom: 22px;
}
.logo-cell {
  background: var(--qp-hatch);
  aspect-ratio: 16 / 7;
  display: flex; align-items: center; justify-content: center;
  padding: 10px;
}
.logo-cell img { max-height: 100%; object-fit: contain; }
.logo-cell__name {
  font-family: var(--qp-font-mono); font-size: 10px;
  color: var(--qp-text-faint); background: var(--qp-cream); padding: 4px 7px;
}

/* --------------------------------------------------------------------------
   8. Coverage
   -------------------------------------------------------------------------- */
.region { background: var(--qp-ink); padding: 26px 24px 30px; }
.region__name { font-family: var(--qp-font-display); font-size: 21px; }
.region__note { margin-top: 8px; font-size: 13.5px; color: var(--qp-accent-on-dark); }

/* --------------------------------------------------------------------------
   9. Contact page
   -------------------------------------------------------------------------- */
.enquire__lead {
  margin: 0; font-size: var(--qp-size-lead);
  color: var(--qp-text-body); line-height: 1.72; max-width: 44ch;
}
.enquire__heading {
  font-family: var(--qp-font-display); font-weight: 400;
  font-size: var(--qp-size-h2-lead); line-height: 1.16;
  margin: 18px 0 22px; max-width: 18ch;
}
.enquire__contact {
  margin-top: 38px; padding-top: 26px;
  border-top: 1px solid var(--qp-line);
  font-size: var(--qp-size-body); color: var(--qp-text-muted); line-height: 2;
}
.enquire__contact a { color: var(--qp-text-muted); }
.enquire__contact a:hover { color: var(--qp-ink); }

.private-door {
  margin-top: 32px; padding: 22px 24px;
  background: var(--qp-stone); border: 1px solid var(--qp-line);
}
.private-door__label {
  font-size: var(--qp-size-eyebrow); letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--qp-text-faint);
}
.private-door p { margin: 10px 0 0; font-size: var(--qp-size-small); color: var(--qp-text-body); line-height: 1.68; }

.enquiry-form {
  border: 1px solid var(--qp-line);
  background: var(--qp-cream);
  padding: 40px 38px 42px;
}
.enquiry-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.enquiry-form__note { margin: 16px 0 0; font-size: var(--qp-size-meta); color: var(--qp-text-faint); line-height: 1.6; }

/* --------------------------------------------------------------------------
   10. Text pages (about, questions, privacy)
   -------------------------------------------------------------------------- */
.text-page { padding-bottom: var(--qp-section-y); }
.text-block { padding: 34px 0 38px; border-top: 1px solid var(--qp-line); }
.text-block__heading {
  font-family: var(--qp-font-display); font-weight: 400;
  font-size: var(--qp-size-h3); margin: 0 0 16px;
}

.faq { border-top: 1px solid var(--qp-line); }
.faq__item { border-bottom: 1px solid var(--qp-line); }
.faq__question {
  cursor: pointer; padding: 24px 0;
  font-family: var(--qp-font-display); font-size: var(--qp-size-h3);
}
.faq__answer { padding-bottom: 26px; }

/* --------------------------------------------------------------------------
   11. Account pages
   -------------------------------------------------------------------------- */
.account {
  display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start;
  padding-bottom: var(--qp-section-y);
}
.account-panel { border: 1px solid var(--qp-line); background: var(--qp-cream); padding: 34px 32px 36px; }
.account-panel__title {
  font-family: var(--qp-font-display); font-weight: 400;
  font-size: var(--qp-size-h3); margin: 0 0 10px;
}
.account-panel__text { margin: 0 0 22px; font-size: var(--qp-size-body); color: var(--qp-text-body); line-height: 1.68; }
.account-panel__status { margin: 14px 0 0; font-size: var(--qp-size-small); color: var(--qp-text-muted); }
.account-panel__status:empty { display: none; }
.account__aside { grid-column: 1 / -1; margin: 0; font-size: var(--qp-size-body); color: var(--qp-text-muted); }

.passkey-list { list-style: none; margin: 0 0 22px; padding: 0; }
.passkey-list__item {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 12px 0; border-bottom: 1px solid var(--qp-line);
  font-size: var(--qp-size-body); color: var(--qp-text-body);
}
.link-button {
  border: 0; background: none; padding: 0; cursor: pointer;
  font: inherit; color: var(--qp-accent);
}
.link-button:hover { color: var(--qp-ink); }

/* --------------------------------------------------------------------------
   12. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .account { grid-template-columns: 1fr; }
  .ground-panel { padding: 34px 26px; }
  .enquiry-form { padding: 30px 24px 32px; }
}

@media (max-width: 620px) {
  .fact { border-right: 0; border-bottom: 1px solid var(--qp-line); }
  .hero { height: auto; min-height: 78vh; }
}