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

   All sizes below are measured off Workplace-05134f01.png,
   a 1366px-wide export of a 1920px design canvas
   (conversion factor 1920 / 1366 = 1.4056).
   The vw legs of each clamp() are set so the value lands
   exactly on the measured pixel size at a 1920px viewport.
   ═══════════════════════════════════════════════════════ */

/* ── Shared workplace type scale ───────────────────────
   heading   58px / 1.05   Montserrat 700
   body      26px / 1.4    Marcellus  400
   label     18px          Marcellus  400  (styles.css)
   ────────────────────────────────────────────────────── */

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

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

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

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

.wp-hero__heading {
  font-family: var(--font-serif);           /* Montserrat */
  /* cap 31px @1366 -> 43.6px @1920 -> 62px at cap ratio 0.70 */
  font-size: clamp(1.75rem, 2.6486vw, 3.1775rem);
  font-weight: 700;
  line-height: 1.1;
  color: #fff;
  max-width: none;                          /* mockup runs it on one line */
  margin: 0 auto;
}

.wp-hero__heading em {
  font-style: italic;
  font-weight: 600;
}

/* ── Band backgrounds (measured off the mockup) ───── */
.wp-split--light { background: var(--color-surface-light); }   /* #F4F3F0 */
.wp-process      { background: var(--color-surface-light); }   /* #F4F3F0 */
/* .wp-split (second one) inherits the page background #E7E6DE */

/* the slider controls sit under the logo column, not full width */
.testimonials__nav { max-width: 309px; margin-top: 2.75rem; }

/* ── 2 & 4. Split text/image sections ─────────────── */
.wp-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;                       /* mockup tops both columns */
}

.wp-split__heading {
  font-family: var(--font-serif);
  /* cap 28px @1366 -> 39.4px @1920 -> 58px */
  font-size: clamp(1.75rem, 2.4764vw, 2.9725rem);
  font-weight: 700;
  line-height: 1.05;                        /* measured pitch 61px on 58px type */
  margin-bottom: 2.25rem;
}

.wp-split__desc {
  /* cap 13px @1366 -> 18.3px @1920 -> 26px */
  font-size: clamp(1.0625rem, 1.1103vw, 1.3325rem);
  line-height: 1.4;                         /* measured pitch 36.5px */
  color: var(--color-text);
  margin-bottom: 2.25rem;                   /* measured paragraph gap 36px */
}

.wp-split__desc:last-of-type {
  margin-bottom: 2.5rem;
}

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

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

/* split 2 photo is near-square 745 x 788 */
.wp-split__img--square { aspect-ratio: 20 / 21; }

.wp-split__img img { width: 100%; height: 100%; object-fit: cover; }

/* ── 3. Who we work with (dark numbered list) ─────── */
.wp-audience { background: var(--color-dark); color: #fff; }

.wp-audience__list { border-top: none; }

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

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

.wp-audience__num {
  font-family: var(--font-sans);            /* Marcellus — single weight */
  font-size: clamp(1rem, 1.1103vw, 1.3325rem);
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--color-copper);
  padding-top: 1.8rem;                      /* drops the figure onto the title baseline */
}

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

.wp-audience__desc {
  font-size: clamp(1.0625rem, 1.1103vw, 1.3325rem);
  line-height: 1.4;
  color: #fff;                              /* mockup is pure white, not muted */
}

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

.wp-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: none;                          /* explicit <br>s carry the wrap */
  margin-bottom: clamp(2.5rem, 4.264vw, 5.125rem);
}

/* the accordion stops short of the right gutter in the mockup */
.wp-services__list { max-width: 1250px; }

.wp-services__list .faq__item { border-bottom: 1px solid var(--color-copper); }
.wp-services__list .faq__item:first-child { border-top: 1px solid var(--color-copper); }

.wp-services__list .faq__question {
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 3.375rem;                            /* '+' at 180, label at 254 */
  padding-top: 2.2rem;                      /* mockup row pitch is 98px, not 138 */
  padding-bottom: 2.2rem;
}

.wp-services__list .faq__question-text {
  font-family: var(--font-sans);            /* Marcellus */
  /* cap 16px @1366 -> 22.5px @1920 -> 31px */
  font-size: clamp(1.125rem, 1.3243vw, 1.5887rem);
  font-weight: 400;                         /* Marcellus ships one weight only */
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.2;
}

.wp-services__list .faq__icon { width: 30px; height: 30px; }
.wp-services__list .faq__icon::before,
.wp-services__list .faq__icon::after { background: #fff; }
.wp-services__list .faq__icon::before { height: 2px; }
.wp-services__list .faq__icon::after { width: 2px; }

.wp-services__list .faq__item.active .faq__answer { max-height: 420px; padding-bottom: 3rem; }

.wp-services__list .faq__answer p {
  font-size: clamp(1rem, 1.2382vw, 1.4862rem); /* 29px */
  line-height: 1.45;                         /* measured pitch 43.6px */
  color: #fff;
  max-width: 1060px;
  padding-left: 5.25rem;                     /* aligns under the label, not the '+' */
}

.wp-services__cta {
  display: flex;
  align-items: center;
  gap: 2.375rem;
  flex-wrap: wrap;
  margin-top: clamp(2.5rem, 4.264vw, 5.125rem);
}

.wp-services__cta-text {
  font-family: var(--font-serif);           /* Montserrat */
  /* cap 20px @1366 -> 28.1px @1920 -> 40px */
  font-size: clamp(1.6rem, 2.1vw, 2.5rem);   /* 10 Sept review: bigger */
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  margin: 0;
}

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

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

.wp-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);
  /* the mockup keeps the photograph almost clean — just enough scrim
     at top and bottom to hold the label and the controls */
  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%);
}

.wp-fullimage__overlay .section-label { margin-bottom: 0; }

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

.wp-fullimage__dots { display: flex; gap: 0.75rem; }

/* progress bars, not dots: one filled, the rest outlined */
.wp-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);
}

.wp-fullimage__dot.active { background: #fff; border-color: #fff; }

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

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

.wp-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: clamp(3rem, 5.822vw, 6.97rem);  /* measured 137px */
}

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

.wp-process__img img { width: 100%; height: 100%; object-fit: cover; }

/* The greyscale-to-colour reveal on scroll lives in main.js (17d). */

/* 10 Sept review: "Image must not be touching the line of the process
   diagram". Keep clear space between the sticky intro column and the rail;
   below 1025px the grid stacks and the rail sits underneath instead. */
@media (min-width: 1025px) {
  .wp-process__intro { padding-right: clamp(2rem, 4.5vw, 4.5rem); }
}

/* one continuous rail down the list — no gaps between steps */
.wp-process__step {
  padding: 0 0 5.1rem 2.25rem;   /* mockup step pitch ~190px */
  margin-bottom: 0;
  border-left: 3px solid #D6D1C4;
  color: #C2B7AB;                            /* measured inactive tone */
  transition: color 0.4s var(--ease-out), border-color 0.4s var(--ease-out);
}

.wp-process__step:last-child { padding-bottom: 0; }

.wp-process__step.is-active {
  border-left-color: var(--color-copper);
  color: var(--color-text);
}

.wp-process__num {
  display: block;
  font-family: var(--font-serif);            /* Montserrat */
  font-size: clamp(1.375rem, 2.214vw, 2.665rem);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: inherit;
  line-height: 1.1;
  margin-bottom: 0.4rem;
}

.wp-process__desc {
  font-size: clamp(1.0625rem, 1.1956vw, 1.435rem);  /* 28px */
  line-height: 1.41;                             /* mockup line pitch 23px */
  color: inherit;
  max-width: 810px;
}

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

.wp-cta-band__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(2.5rem, 5.125vw, 6.15rem);
  align-items: center;
}

.wp-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.75rem;
}

.wp-cta-band__desc {
  font-size: clamp(1.0625rem, 1.1956vw, 1.435rem);
  line-height: 1.5;
  color: #fff;
  margin-bottom: 2.5rem;
  max-width: 620px;
}

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

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

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

.wp-cta-band__img img { width: 100%; height: 100%; object-fit: cover; }

/* ── Responsive ───────────────────────────────────── */
@media (max-width: 1024px) {
  .wp-process__grid { grid-template-columns: 1fr; gap: 3rem; }
  .wp-process__intro { position: static; }
  .wp-cta-band__grid { grid-template-columns: 1fr; }
  .wp-cta-band__img { order: -1; }
  .wp-services__list .faq__answer p { padding-left: 0; }
}

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

  .wp-audience__row {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 2.25rem 0;
  }

  .wp-audience__num { padding-top: 0; }

  .wp-services__list .faq__question { gap: 1.5rem; padding-top: 1.75rem; padding-bottom: 1.75rem; }
}

/* 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. */
.wp-process__img {
  position: relative;
}

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

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

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

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