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

/* ── 1. Hero (split image / cream text) ───────────── */
.cpg-hero {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  min-height: 70vh;
}

.cpg-hero__img {
  position: relative;
  overflow: hidden;
}

.cpg-hero__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cpg-hero__img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(35, 31, 32, 0.7) 0%, rgba(35, 31, 32, 0) 45%);
}

.cpg-hero__img-caption {
  position: absolute;
  left: clamp(20px, 2.46vw, 39.36px);
  right: clamp(20px, 2.46vw, 39.36px);
  bottom: 2.5rem;
  z-index: 1;
  color: #fff;
  font-size: 0.984rem;
  line-height: 1.5;
  max-width: 320px;
}

.cpg-hero__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(100px, 11.48vw, 131.2px) clamp(20px, 3.28vw, 49.2px) 3rem;
}

.cpg-hero__heading {
  font-family: var(--font-serif);
  font-size: clamp(1.856rem, 2.3042vw, 2.7675rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  max-width: 420px;
}
.cpg-hero__label {
  margin-top: 1.5rem;
  font-size: 0.9225rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text);
  line-height: 1.5;
}

/* ── 2. Join us (dark) ────────────────────────────── */
.cpg-join {
  background: var(--color-dark);
  color: #fff;
}

.cpg-join .section-label {
  color: var(--color-copper-light);
}

.cpg-join .section-label::before {
  background: var(--color-copper-light);
}

.cpg-join__top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 3.28vw, 3.28rem);
  align-items: end;
  margin-bottom: clamp(2.5rem, 4.1vw, 3.28rem);
}

.cpg-join__heading {
  font-family: var(--font-serif);
  font-size: clamp(1.856rem, 2.3042vw, 2.7675rem);
  font-weight: 700;
  line-height: 1.08;
  color: #fff;
}

.cpg-join__intro {
  font-size: 1.0496rem;
  line-height: 1.5;
  color: var(--color-text-muted-on-dark);
}

.cpg-join__grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(2.5rem, 4.1vw, 3.28rem);
  align-items: start;
  margin-bottom: 2.5rem;
}

.cpg-join__list {
  list-style: none;
  /* Webflow's base list style adds a 40px indent */
  padding-left: 0;
  margin: 0;
}

.cpg-join__item {
  padding: 0.6rem 0;
  font-family: var(--font-serif);
  font-size: 1.558rem;
  font-weight: 700;
  color: var(--color-text-muted-on-dark);
  transition: color 0.3s ease;
  cursor: default;
}

.cpg-join__item--active,
.cpg-join__item:hover {
  color: #fff;
}

.cpg-join__card {
  background: var(--color-dark-surface);
  border-radius: 4px;
  overflow: hidden;
}

.cpg-join__card-img {
  aspect-ratio: 16/9;
  overflow: hidden;
}

.cpg-join__card-body {
  padding: 1.75rem;
}

.cpg-join__card-title {
  font-family: var(--font-serif);
  font-size: 1.0496rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
  color: #fff;
  line-height: 1.08;
}

.cpg-join__card-desc {
  font-size: 0.984rem;
  line-height: 1.5;
  color: var(--color-text-muted-on-dark);
}

/* ── 3. Gallery (full-bleed) ───────────────────────── */
.cpg-gallery {
  padding: clamp(2.5rem, 4.1vw, 3.28rem) 0;
  overflow: hidden;
}

.cpg-gallery__row {
  display: grid;
  gap: clamp(0.75rem, 1.312vw, 1.025rem);
}

/* Row 1 — narrow studio shot, then the wide team panorama.
   Bottom-aligned so the panorama sits taller, as per the design. */
.cpg-gallery__row--split {
  grid-template-columns: 1fr 3.3fr;
  align-items: end;
  margin-bottom: clamp(0.75rem, 1.312vw, 1.025rem);
}

.cpg-gallery__row--split .cpg-gallery__img:first-child {
  aspect-ratio: 4/3.1;
}

.cpg-gallery__row--split .cpg-gallery__img:last-child {
  aspect-ratio: 1082/396;
}

/* Row 2 — three across, edge to edge */
.cpg-gallery__row--trio {
  grid-template-columns: repeat(3, 1fr);
}

.cpg-gallery__row--trio .cpg-gallery__img {
  aspect-ratio: 4/2.9;
}

.cpg-gallery__img {
  overflow: hidden;
  border-radius: 4px;
}

.cpg-gallery__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── 4. Open positions ─────────────────────────────── */
.cpg-positions__heading {
  font-family: var(--font-serif);
  font-size: clamp(1.856rem, 2.3042vw, 2.7675rem);
  font-weight: 700;
  line-height: 1.08;
  margin-bottom: 0.75rem;
}
.cpg-positions__sub {
  font-size: 1.0496rem;
  color: var(--color-text);
  max-width: 500px;
  margin-bottom: clamp(2rem, 3.28vw, 2.46rem);
  line-height: 1.5;
}

.cpg-positions__list {
  border-top: 1px solid var(--color-border);
}

.cpg-position {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 2rem 0;
  border-bottom: 1px solid var(--color-border);
}

.cpg-position__title {
  font-family: var(--font-serif);
  font-size: 1.3366rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
  line-height: 1.08;
}
.cpg-position__meta {
  font-size: 0.984rem;
  color: var(--color-text);
}

/* ── 5. What our people say (copper) ──────────────── */
.cpg-quote {
  background: var(--color-copper);
  color: #fff;
  padding: clamp(60px, 6.56vw, 82px) 0;
}

.cpg-quote .section-label {
  color: rgba(255, 255, 255, 0.8);
}

.cpg-quote .section-label::before {
  background: rgba(255, 255, 255, 0.8);
}

.cpg-quote__inner {
  display: flex;
  align-items: center;
  gap: clamp(2rem, 3.28vw, 2.87rem);
  margin-top: clamp(2rem, 3.28vw, 2.46rem);
}

.cpg-quote__avatar {
  flex-shrink: 0;
  width: clamp(120px, 10.66vw, 139.4px);
  aspect-ratio: 1/1.12;
  overflow: hidden;
  border-radius: 2px;
}

.cpg-quote__mark {
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 1rem;
}

.cpg-quote__text {
  font-family: var(--font-serif);
  /* 26 Sept: dialled back a step — the quote was reading larger than the
     headings around it, on a phone most of all. */
  font-size: clamp(1.06rem, 1.3vw, 1.55rem);
  font-weight: 600;
  line-height: 1.45;
  max-width: 640px;
  margin-bottom: 1.25rem;
}

.cpg-quote__name {
  display: block;
  font-weight: 700;
}

.cpg-quote__role {
  display: block;
  font-size: 0.984rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.75);
  margin-top: 0.25rem;
  line-height: 1.5;
}

.cpg-quote__nav {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-top: 2.5rem;
}

.cpg-quote__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff;
  transition: background 0.3s ease;
}

.cpg-quote__btn:hover {
  background: rgba(255, 255, 255, 0.15);
}

.cpg-quote__counter {
  font-size: 0.984rem;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.5;
}
/* ── 6. File upload field (contact form extension) ─── */
.contact__file {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0.9375rem 1.25rem;
  border-radius: 6px;
  background: var(--color-bg-alt);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 0.984rem;
  cursor: pointer;
  transition: box-shadow 0.3s ease;
}

.contact__file:hover,
.contact__file:focus-within {
  box-shadow: 0 0 0 2px var(--color-copper);
}

.contact__file input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* ── Responsive ───────────────────────────────────── */
@media (max-width: 1024px) {
  .cpg-join__top,
  .cpg-join__grid {
    grid-template-columns: 1fr;
  }

  .cpg-gallery__row--split {
    grid-template-columns: 1fr 2.2fr;
  }
}

@media (max-width: 768px) {
  .cpg-gallery__row--split {
    grid-template-columns: 1fr;
  }

  .cpg-gallery__row--split .cpg-gallery__img:first-child {
    display: none;
  }

  .cpg-gallery__row--split .cpg-gallery__img:last-child {
    aspect-ratio: 16/9;
  }

  .cpg-gallery__row--trio {
    grid-template-columns: 1fr;
  }

  .cpg-quote__inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .cpg-position {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
}

/* Real photo inside the quote avatar circle */
.cpg-quote__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ═══════════════════════════════════════════════════════
   16 Sept: matched to the Canva mockup (Careers Page).
   Sizes measured off the 1366-wide canvas, so the vw values
   are px / 13.66.
   ═══════════════════════════════════════════════════════ */

/* Hero — tall split, photo takes ~61%, nav sits transparent over it.
   17 Sept: the split stays side by side at every width (it used to stack
   on tablet and phone); the type scales down with the viewport instead. */
.cpg-hero {
  grid-template-columns: 66.8% 1fr;   /* 17 Sept: the approved Webflow layout (photo ~67% wide) */
  min-height: clamp(440px, 62.45vw, 960px);
}

.cpg-hero__img img {
  /* mockup frames the photo from its left edge, zoomed past the pendants */
  object-position: 0% 50%;
  transform: scale(1.23);
  transform-origin: 38% 88%;
}

.cpg-hero__img::after {
  background: linear-gradient(to top, rgba(35, 31, 32, 0.55) 0%, rgba(35, 31, 32, 0) 35%),
              rgba(35, 31, 32, 0.12);
}

.cpg-hero__img-caption {
  left: clamp(12px, 3.66vw, 60px);
  right: clamp(12px, 3.66vw, 60px);
  bottom: clamp(1rem, 2.2vw, 2.4rem);
  font-size: clamp(0.86rem, 1.46vw, 1.6rem);
  line-height: 1.4;
  max-width: 15.5em;
}

.cpg-hero__text {
  padding: clamp(70px, 8vw, 120px) clamp(10px, 3.28vw, 49.2px);
}

.cpg-hero__heading {
  font-size: clamp(0.93rem, 2.8vw, 4.2rem);   /* sized to the ~33% cream column */
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: 0.01em;
  max-width: 8.6em;
}

.cpg-hero__label {
  margin-top: clamp(0.75rem, 2.8vw, 2.9rem);
  font-size: clamp(0.86rem, 1.32vw, 1.3rem);   /* 18px at laptop width, as set in the Designer */
  font-weight: 400;
  letter-spacing: 0.01em;
}

/* Join us — list and button on the left, card on the right */
.cpg-join {
  padding: clamp(60px, 8.05vw, 120px) 0 clamp(60px, 8.8vw, 130px);
}

.cpg-join__heading {
  font-size: clamp(1.9rem, 2.94vw, 3.2rem);
  font-weight: 600;
  line-height: 1.05;
}

.cpg-join__intro {
  font-size: clamp(1.1rem, 1.39vw, 1.45rem);
  line-height: 1.37;
  color: #fff;
  max-width: 24em;
}

.cpg-join__item {
  padding: clamp(0.3rem, 0.5vw, 0.55rem) 0;
  font-size: clamp(1.5rem, 2.64vw, 2.8rem);
  font-weight: 600;
  line-height: 1.2;
  color: #545454;
}

.cpg-join__item--active,
.cpg-join__item:hover {
  color: #fff;
}

.cpg-join__card {
  background: var(--color-bg-alt);
  border-radius: 0;
}

.cpg-join__card-img {
  aspect-ratio: 600 / 401;
}

.cpg-join__card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cpg-join__card-body {
  padding: clamp(1rem, 1.6vw, 1.6rem) clamp(1.25rem, 2.2vw, 2.2rem) clamp(1.1rem, 1.76vw, 1.8rem);
}

.cpg-join__card-title {
  font-size: clamp(1.1rem, 1.39vw, 1.45rem);
  font-weight: 600;
  color: var(--color-dark);
  margin-bottom: 0.35rem;
}

.cpg-join__card-desc {
  font-size: 0.9rem;
  line-height: 1.3;
  color: var(--color-dark);
}

@media (min-width: 1025px) {
  .cpg-join > .container,
  .cpg-quote > .container,
  .contact > .container {
    max-width: none;
    padding: 0 8.86vw;
  }

  /* the approved form column ends at x1262, a little further right */
  .contact > .container { padding-right: 7.6vw; }

  /* The Talk To Us button sits outside .cpg-join__grid in the markup (and
     on Webflow), so flatten the grid into the container to put it under
     the list, beside the card. */
  .cpg-join > .container {
    display: grid;
    grid-template-columns: 1fr 51.9%;
    grid-template-rows: auto auto 1fr;
  }

  .cpg-join__top {
    grid-column: 1 / -1;
    grid-template-columns: 1fr 51.9%;
    gap: 0;
    margin-bottom: clamp(2.5rem, 4.5vw, 4.5rem);
  }

  .cpg-join__intro { margin-left: 0.4rem; }

  .cpg-join__grid { display: contents; }

  .cpg-join__list {
    grid-column: 1;
    grid-row: 2;
    align-self: end;
    margin-top: clamp(1rem, 2.2vw, 2.2rem);
  }

  .cpg-join__card {
    grid-column: 2;
    grid-row: 2 / 4;
  }

  .cpg-join > .container > .btn {
    grid-column: 1;
    grid-row: 3;
    justify-self: start;
    align-self: start;
    margin-top: clamp(2.5rem, 4.4vw, 4.4rem);
    min-width: clamp(220px, 22.4vw, 320px);
    justify-content: center;
  }
}

/* Open positions — full-width rows */
.cpg-positions > .container {
  max-width: none;
  padding: 0 clamp(20px, 3.88vw, 60px);
}

.cpg-positions__heading {
  font-size: clamp(1.4rem, 1.76vw, 1.9rem);
  font-weight: 600;
  margin-bottom: 0.4rem;
}

.cpg-positions__sub {
  font-size: clamp(1.1rem, 1.39vw, 1.45rem);
  line-height: 1.2;
  max-width: 22em;
}

.cpg-position {
  padding: clamp(1.1rem, 1.6vw, 1.6rem) 0;
}

.cpg-position__title {
  font-size: clamp(1.1rem, 1.24vw, 1.35rem);
  font-weight: 600;
  margin-bottom: 0.2rem;
}

.cpg-position__meta {
  font-size: clamp(1.05rem, 1.24vw, 1.35rem);
}

/* Apply Now — the mockup's slim pill: 160 x 29 on the 1366 canvas */
.cpg-position .btn {
  flex-shrink: 0;
  justify-content: center;
  min-width: clamp(130px, 11.7vw, 175px);
  padding: 0.5rem 1rem;
  font-size: 0.93rem;
  letter-spacing: 0.02em;
  line-height: 1.1;
}

/* What our people say — large photo, square arrows */
.cpg-quote {
  padding: clamp(50px, 4.54vw, 70px) 0 clamp(60px, 5.86vw, 90px);
}

.cpg-quote__inner {
  align-items: flex-start;
  gap: clamp(2rem, 3.2vw, 3.2rem);
  margin-top: clamp(2.5rem, 5.1vw, 5.2rem);
}

.cpg-quote__avatar {
  width: clamp(150px, 16.1vw, 240px);
  aspect-ratio: 220 / 200;
  border-radius: 0;
}

.cpg-quote__body {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: clamp(1rem, 1.9vw, 1.9rem);
  margin-top: -1.5rem;
}

.cpg-quote__mark {
  grid-row: 1 / 3;
  width: clamp(36px, 3.66vw, 54px);
  height: auto;
  color: #fff;
  margin: 0;
}

.cpg-quote__text {
  font-size: clamp(1.2rem, 1.72vw, 1.85rem);
  font-weight: 400;
  line-height: 1.22;
  /* the measure grows with the em box, so widen it to keep the same line count
     now that the type is smaller */
  max-width: 26em;
  margin: 1.8rem 0 1rem;
}

.cpg-quote__author { grid-column: 2; }

.cpg-quote__name {
  font-size: clamp(1.1rem, 1.46vw, 1.55rem);
  font-weight: 400;
}

.cpg-quote__role {
  font-size: 0.86rem;
  letter-spacing: 0;
  color: #fff;
  margin-top: 0.3rem;
}

.cpg-quote__nav {
  justify-content: space-between;
  width: clamp(150px, 16.1vw, 240px);
  margin-top: clamp(1.25rem, 2.1vw, 2.2rem);
  gap: 0.5rem;
}

/* Webflow's .w-button / button defaults paint these blue; set every
   state explicitly. */
.cpg-quote__btn,
.cpg-quote__btn:hover,
.cpg-quote__btn:focus {
  width: 46px;
  height: 42px;
  padding: 0;
  border-radius: 0;
  border: 1px solid #fff;
  background: transparent;
  color: #fff;
  line-height: 1;
}

.cpg-quote__btn + .cpg-quote__counter + .cpg-quote__btn,
.cpg-quote__btn:last-child {
  background: var(--color-dark);
  border-color: var(--color-dark);
}

.cpg-quote__btn:hover { background: rgba(255, 255, 255, 0.15); }
.cpg-quote__btn:last-child:hover { background: #000; }

.cpg-quote__btn svg { width: 26px; height: 26px; }

.cpg-quote__counter {
  font-size: clamp(1.1rem, 1.39vw, 1.45rem);
  color: #fff;
}

/* Join our Team — beige fields, narrower form column */
.contact {
  padding: clamp(60px, 9.5vw, 140px) 0 clamp(60px, 6vw, 90px);
}

.contact__heading {
  font-size: clamp(1.9rem, 3.07vw, 3.3rem);
  font-weight: 600;
  margin-bottom: clamp(1.5rem, 2.5vw, 2.5rem);
}

.contact__text {
  font-size: clamp(1.05rem, 1.32vw, 1.4rem);
  line-height: 1.45;
  color: #fff;
  max-width: 21.6em;
}

.contact__text + .contact__text { margin-top: 1.4rem; }

.contact__form { gap: clamp(1rem, 1.76vw, 1.7rem); }

/* On Webflow the fields sit inside an inner <form> within .contact__form,
   and its label style makes the upload text bold with a bottom margin. */
.contact__form > form {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 1.76vw, 1.7rem);
}

.contact__input,
.contact__select,
.contact__file {
  font-weight: 400;
  margin-bottom: 0;   /* Webflow's .w-input / .w-select add 10px */
}
.contact__row { gap: clamp(1rem, 2.34vw, 2.3rem); }

.contact__input,
.contact__select,
.contact__file {
  height: auto;
  min-height: 45px;
  padding: 0.95rem 1rem;
  background: var(--color-surface-light);
  color: var(--color-dark);
  font-family: var(--font-sans);
  font-size: 0.93rem;
  letter-spacing: 0;
  border-radius: 0;
}

.contact__file {
  justify-content: center;
  text-align: center;
  text-transform: uppercase;
  min-height: clamp(70px, 6.37vw, 96px);
}

/* 17 Sept approved design: size limit on a second line of the upload label */
.contact__file span::after {
  content: 'Max 2MB';
  display: block;
}

/* Submit — wide copper pill, no arrow (182 x 45 on the 1366 canvas) */
.contact .contact__submit {
  align-self: flex-start;
  justify-content: center;
  min-width: clamp(150px, 13.3vw, 195px);
  min-height: 45px;
  padding: 0.8rem 1.5rem;
  font-family: var(--font-serif);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.contact .contact__submit svg { display: none; }

@media (min-width: 1025px) {
  .contact__inner {
    grid-template-columns: 1fr 34.6vw;
    align-items: start;
  }
  .contact__form { margin-top: 0.6rem; }
}

/* Nav — transparent over the split hero until the page scrolls, at every
   width. The logo sits over the photo and the phone menu button over the
   cream panel. Which links fall over the photo depends on the screen width,
   so a small script on the page adds .nav__link--on-photo to those. */
.nav.nav--solid:not(.scrolled) {
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
}
.nav.nav--solid:not(.scrolled) .nav__logo-wordmark--light { display: block; }
.nav.nav--solid:not(.scrolled) .nav__logo-wordmark--dark { display: none; }
.nav.nav--solid:not(.scrolled) .nav__link { color: var(--color-dark); }
.nav.nav--solid:not(.scrolled) .nav__link.nav__link--on-photo { color: #fff; }