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

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

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

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

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

.rt-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;
}

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

/* ── 2 & 5. Split text/image sections ─────────────── */
.rt-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;
}

.rt-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;
}
.rt-split__desc {
  font-size: clamp(1.0625rem, 1.1103vw, 1.3325rem);
  line-height: 1.4;
  color: var(--color-text);
  margin-bottom: 1.25rem;
}

.rt-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 */
.rt-split:not(.rt-split--light) .rt-split__img { aspect-ratio: 531 / 561; }

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

/* ── 3. The three lenses (Venn) ───────────────────── */
/* Composition measured off the 1366-wide mockup: the circle cluster is
   575x614 sitting at x=354, with the three labels placed around it and
   dashed connectors running back to the circles. Laid out as an aspect-ratio
   stage so it scales, and collapses to a simple stack below 1024px. */
.rt-lenses__stage {
  position: relative;
  width: 100%;
  padding-bottom: 57.3%;          /* 720 / 1257 container width */
  margin-top: clamp(1rem, 1.64vw, 1.64rem);
}

.rt-lenses__stage > * { position: absolute; }

.rt-lenses__venn {
  left: 23.8%;                    /* mockup x=354, container starts at 54.6 */
  top: 3.9%;                      /* 28px into a 720px stage */
  width: 45.7%;                   /* 575px cluster / 1257 container */
}

.rt-lenses__venn svg { display: block; width: 100%; height: auto; }

.rt-venn__tints circle { opacity: 0.45; }

.rt-lens__title {
  font-family: var(--font-serif);
  font-size: clamp(1rem, 1.45vw, 1.4rem);   /* 10 Sept review: smaller */   /* 30px at 1366 (cap-height 21 measured) */
  font-weight: 700;
  line-height: 1.1;
  text-transform: uppercase;
  margin: 0 0 0.55rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-text);
  white-space: nowrap;
}

.rt-lens__desc {
  font-size: clamp(0.95rem, 1.107vw, 1.107rem);  /* ~18.5px at 1366 (28px line pitch) */
  line-height: 1.45;
  color: var(--color-text);
  margin: 0;
}

.rt-lens--art      { left: 1.8%;  top: 16.5%; width: 20.8%; }
.rt-lens--science  { left: 71.2%; top: 33.6%; width: 25.4%; }
.rt-lens--delivery { left: 61.0%; top: 82.9%; width: 27.1%; }

/* dashed connector running from each label toward the circles */
.rt-lens::after {
  content: "";
  position: absolute;
  top: calc(clamp(1.15rem, 1.804vw, 1.681rem) * 1.1 + 0.5rem);
  height: 0;
  border-top: 1px dashed rgba(35, 31, 32, 0.55);
}

.rt-lens--art::after      { left: 100%; width: 67%; }
.rt-lens--science::after  { right: 100%; width: 78%; }
.rt-lens--delivery::after { right: 100%; width: 51%; }

/* arrowheads, pointing back at the circles */
.rt-lens::before {
  content: "";
  position: absolute;
  top: calc(clamp(1.15rem, 1.804vw, 1.681rem) * 1.1 + 0.5rem - 3px);
  width: 0; height: 0;
  border-top: 3.5px solid transparent;
  border-bottom: 3.5px solid transparent;
}

.rt-lens--art::before {
  left: calc(100% + 67%);
  border-left: 7px solid rgba(35, 31, 32, 0.55);
}

.rt-lens--science::before {
  right: calc(100% + 78%);
  border-right: 7px solid rgba(35, 31, 32, 0.55);
}

.rt-lens--delivery::before {
  right: calc(100% + 51%);
  border-right: 7px solid rgba(35, 31, 32, 0.55);
}

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

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

.rt-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;
}

.rt-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;
}

.rt-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;
}

.rt-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) ─────────────────── */
.rt-services { background: var(--color-dark); color: #fff; }

.rt-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 */
.rt-services__list .faq__item { border-bottom: 1px solid var(--color-copper); }
.rt-services__list .faq__item:first-child { border-top: 1px solid var(--color-copper); }

.rt-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;
}

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

.rt-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);
}

.rt-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 ─────────────────────── */
.rt-fullimage {
  position: relative;
  height: clamp(360px, 55.64vw, 760px);   /* featured band is 760px on all three mockups */
  overflow: hidden;
}

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

.rt-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%);
}

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

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

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

.rt-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);
}

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

/* ── 8. Process ────────────────────────────────────── */
.rt-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;
}

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

.rt-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;
}

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

.rt-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);
}

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

.rt-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;
}
.rt-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;
}

/* ── 9. CTA band (copper) ─────────────────────────── */
.rt-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 */
.rt-cta-band > .container { width: 100%; }

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

.rt-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;
}

.rt-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;
}

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

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

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

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

/* ── Responsive ───────────────────────────────────── */
@media (max-width: 1024px) {
  /* below 1024px the measured composition stops working — stack it */
  .rt-lenses__stage {
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 2.25rem;
  }

  .rt-lenses__stage > * { position: static; }

  .rt-lenses__venn {
    width: 100%;
    max-width: 460px;
    align-self: center;
  }

  .rt-lens--art,
  .rt-lens--science,
  .rt-lens--delivery { width: 100%; }

  .rt-lens__title { white-space: normal; }

  /* connectors and arrowheads only make sense beside the diagram */
  .rt-lens::after, .rt-lens::before { display: none; }

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

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

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

  .rt-process__intro {
    position: static;
  }

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

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

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

  .rt-split__img {
    order: -1;
  }

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

.rt-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. */
.rt-split--light { background: var(--color-surface-light); }
.rt-process      { background: var(--color-surface-light); }

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

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

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

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

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

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

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

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

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

/* Guide cover in the CTA band — measured 341x300 off the retail mockup,
   matching the treatment used on Workplace and Hospitality. */
.rt-cta-band__img--guide {
  aspect-ratio: 341 / 300;
  max-width: 341px;
  margin-left: auto;
  box-shadow: 0 22px 48px rgba(35, 31, 32, 0.32);
}

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

@media (max-width: 1024px) {
  .rt-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, matching the Hospitality page. Both images share the frame with the
   drawing on top, so the photograph is already there rather than loading in mid-fade. */
.rt-process__img {
  position: relative;
}

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

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

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

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

/* The Three Lenses venn.
   assets/Retail Image.png is the finished diagram: the photograph is already clipped into
   the three circles with the tints baked in. Webflow's own node for this block lost its
   picture and is opaque to the Designer API, so the artwork is supplied by an embed in the
   same block and the empty node is hidden. The :has() guard scopes this to the Webflow
   build; the hand-coded page has no .w-embed wrapper and is untouched. */
.rt-lenses__venn:has(> .w-embed) > svg { display: none; }

.rt-lenses__venn > .w-embed { width: 100%; }

.rt-venn__art {
  display: block;
  width: 100%;
  height: auto;
}