/* ================================================================
   COMPANY PAGES — Our Story and Team
   Built on the service-page system (service-page.css). These styles
   only add what those pages do not have: the photo hero, the story
   timeline, the team explorer and the dark culture band.
   Generated markup: service-pages-src/build_company.py
   ================================================================ */

.company-page {
  --cp-ink: #2e2e2e;
  --cp-soft: rgba(46, 46, 46, 0.68);
  --cp-line: rgba(46, 46, 46, 0.12);
  --cp-tile: #eeecf0;
}

/* The pink full stop on headings. It must take the heading's own size:
   styles.css sets every span to 1rem, which shrank it to a speck. */
.cp-dot {
  color: var(--pink);
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

/* ---- Hero -------------------------------------------------------- */

.cp-hero {
  min-height: min(100svh, 58rem);
}

/* Smaller than the service-page hero, and tied to the screen height as
   well as its width, so the headline, lead and button all sit above the
   fold on a laptop. */
.cp-hero-title {
  max-width: 13ch;
  font-size: clamp(2.6rem, min(4.6vw, 8vh), 4.15rem);
}

/* Phones: let the headline use the full width so it breaks into fewer,
   more even lines (text-wrap: balance does the balancing). */
@media (max-width: 768px) {
  .cp-hero-title {
    max-width: none;
    font-size: clamp(2.3rem, 10.4vw, 3rem);
  }
}

.cp-hero .svp-hero-glow {
  right: -18%;
}

.cp-stage {
  position: relative;
  width: 100%;
  max-width: 40rem;
  aspect-ratio: 1 / 1;
  justify-self: end;
}

/* Our story hero: the founder lying on a grey ESC key, cut out (no
   border), floating: he bobs up and down on `translate` (so it never
   fights the rise-in on `transform`), and the soft shadow on the
   "floor" below shrinks and fades as he goes up. */
.cp-binoculars {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  /* Nudged down so he sits level with the headline block. */
  margin: clamp(1.5rem, 3.5vw, 3.25rem) auto 0;
  transform: rotate(-3deg);
  filter: drop-shadow(0 10px 14px rgba(46, 46, 46, 0.12));
  animation:
    svp-rise 1.1s var(--ease-soft) 120ms both,
    cp-float 3.6s ease-in-out 1.2s infinite;
}

.cp-float-shadow {
  display: block;
  width: 62%;
  height: 1.6rem;
  margin: 1.2rem auto 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(46, 46, 46, 0.22), rgba(46, 46, 46, 0));
  animation: cp-float-shadow 3.6s ease-in-out 1.2s infinite;
}

@keyframes cp-float {
  0%,
  100% { translate: 0 0; }
  50% { translate: 0 -18px; }
}

@keyframes cp-float-shadow {
  0%,
  100% { scale: 1; opacity: 1; }
  50% { scale: 0.82; opacity: 0.6; }
}

/* Team hero: a scatter of polaroids from the team photo days. White
   card, square print (the group shot is a wide one), deeper margin at
   the bottom. They rise in one after another, overlapping at slight
   tilts. No hover effect. */
.cp-polaroid {
  --tilt: 0deg;
  position: absolute;
  margin: 0;
  padding: 3.2% 3.2% 13%;
  border-radius: 3px;
  background: #fff;
  box-shadow:
    0 24px 48px rgba(46, 46, 46, 0.16),
    0 3px 8px rgba(46, 46, 46, 0.08);
  transform: rotate(var(--tilt));
  animation: svp-rise 1.1s var(--ease-soft) both;
}

.cp-polaroid img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.cp-polaroid-group {
  --tilt: -3deg;
  top: 4%;
  left: 4%;
  z-index: 1;
  width: 62%;
  padding-bottom: 9%;
  animation-delay: 60ms;
}

.cp-polaroid-group img {
  aspect-ratio: 3 / 2;
}

.cp-polaroid-laugh {
  --tilt: 6deg;
  top: 0;
  right: 0;
  z-index: 2;
  width: 37%;
  animation-delay: 160ms;
}

.cp-polaroid-phone {
  --tilt: -8deg;
  top: 45%;
  left: 0;
  z-index: 3;
  width: 34%;
  animation-delay: 260ms;
}

.cp-polaroid-laptops {
  --tilt: 3deg;
  right: 1%;
  bottom: 4%;
  z-index: 4;
  width: 56%;
  padding-bottom: 9%;
  animation-delay: 360ms;
}

.cp-polaroid-laptops img {
  aspect-ratio: 3 / 2;
}

/* ---- Our story: the question ------------------------------------- */

.cp-question {
  padding: clamp(3rem, 7vw, 6rem) 0 var(--svp-section-y);
}

.cp-question-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 2rem clamp(2rem, 6vw, 6rem);
  align-items: start;
}

.cp-question-head {
  display: grid;
  justify-items: start;
  gap: 1.2rem;
}

.cp-question-body {
  display: grid;
  gap: 1.5rem;
  padding-top: 0.4rem;
}

.cp-question-body p {
  max-width: 36rem;
  color: var(--cp-soft);
  font-size: clamp(1rem, 1.25vw, 1.125rem);
  line-height: 1.6;
}

.cp-question-body .cp-then {
  margin-top: 0.8rem;
  color: var(--cp-ink);
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
}

/* ---- Our story: timeline ----------------------------------------- */

.cp-timeline {
  padding: 0 0 var(--svp-section-y);
}

.cp-steps {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--cp-line);
}

/* ---- Our story: timeline lights up as you scroll ------------------
   With the script running (.is-live), a pink line fills the grey rail
   down to the middle of the screen (--cp-fill, px from the top of the
   list), and each year it passes lights up (.is-lit): the dot fills
   pink with one soft pulse, and the year goes from pale to full ink. */
.cp-steps::after {
  content: "";
  position: absolute;
  top: 0;
  left: calc((100% - 3.5rem) * 0.4762 + 1.75rem);
  z-index: 1;
  width: 2px;
  height: var(--cp-fill, 0px);
  margin-left: -1px;
  border-radius: 2px;
  background: var(--pink);
  pointer-events: none;
}

.cp-steps:not(.is-live)::after {
  display: none;
}

.cp-steps.is-live .cp-step-year {
  color: rgba(46, 46, 46, 0.13);
  transform: translateX(0.6rem);
  transition:
    color 600ms ease,
    transform 700ms var(--ease-soft);
}

.cp-steps.is-live .cp-step.is-lit .cp-step-year {
  color: var(--cp-ink);
  transform: none;
}

.cp-steps.is-live .cp-step-node {
  z-index: 2;
  background: #f6f6f8;
  box-shadow: 0 0 0 1px rgba(46, 46, 46, 0.22);
  transition:
    background-color 300ms ease,
    box-shadow 300ms ease,
    transform 450ms cubic-bezier(0.34, 1.7, 0.64, 1);
}

.cp-steps.is-live .cp-step.is-lit .cp-step-node {
  background: var(--pink);
  box-shadow: 0 0 0 1px var(--pink);
  transform: scale(1.15);
}

.cp-steps.is-live .cp-step-node::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid var(--pink);
  opacity: 0;
  pointer-events: none;
}

.cp-steps.is-live .cp-step.is-lit .cp-step-node::after {
  animation: cp-node-pulse 900ms ease-out 1;
}

@keyframes cp-node-pulse {
  0% { opacity: 0.7; transform: scale(1); }
  100% { opacity: 0; transform: scale(2.6); }
}

@media (prefers-reduced-motion: reduce) {
  .cp-steps.is-live .cp-step-year,
  .cp-steps.is-live .cp-step-node {
    transition: none;
  }

  .cp-steps.is-live .cp-step.is-lit .cp-step-node::after {
    animation: none;
  }
}

.cp-step {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 3.5rem minmax(0, 1.1fr);
  /* The year and the dot sit in the vertical middle of each row. */
  align-items: center;
  padding: clamp(2rem, 4vw, 3.2rem) 0;
  border-bottom: 1px solid var(--cp-line);
}

.cp-step::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc((100% - 3.5rem) * 0.4762 + 1.75rem);
  width: 2px;
  margin-left: -1px;
  background: var(--cp-line);
}

/* The rail stops at the last dot, which is in the middle of its row. */
.cp-step:last-child::before {
  bottom: auto;
  height: 50%;
}

.cp-step-year {
  grid-column: 1;
  justify-self: end;
  padding-right: clamp(1rem, 3vw, 2.4rem);
  color: var(--cp-ink);
  font-family: var(--font-display);
  font-size: clamp(3.4rem, 8vw, 7.4rem);
  font-weight: 800;
  line-height: 0.82;
  letter-spacing: -0.06em;
}

.cp-step-node {
  grid-column: 2;
  position: relative;
  z-index: 1;
  justify-self: center;
  width: 1.1rem;
  height: 1.1rem;
  border: 3px solid #f6f6f8;
  border-radius: 50%;
  background: var(--pink);
  box-shadow: 0 0 0 1px var(--pink);
}

.cp-step-copy {
  grid-column: 3;
  max-width: 30rem;
  padding-left: clamp(0.5rem, 2vw, 1.4rem);
}

.cp-step-copy h3 {
  color: var(--cp-ink);
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.05;
}

.cp-step-copy p {
  margin-top: 0.7rem;
  color: var(--cp-soft);
  font-size: 1.05rem;
  line-height: 1.55;
}

/* ---- Our story: photo strip -------------------------------------- */

.cp-strip {
  overflow: hidden;
  padding: 0 0 var(--svp-section-y);
}

.cp-strip-track {
  display: flex;
  gap: 1rem;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: cp-marquee 70s linear infinite;
}

.cp-strip:hover .cp-strip-track {
  animation-play-state: paused;
}

.cp-strip-track li {
  flex: none;
  width: clamp(16rem, 28vw, 26rem);
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 26px;
  background: var(--cp-tile);
}

.cp-strip-track li:nth-child(even) {
  transform: translateY(1.6rem);
}

.cp-strip-track img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@keyframes cp-marquee {
  to {
    transform: translate3d(calc(-50% - 0.5rem), 0, 0);
  }
}

/* ---- Dark band --------------------------------------------------- */

.cp-culture {
  color: #f4f4f4;
}

/* ---- Team: explorer ----------------------------------------------- */

.cp-explorer {
  padding: clamp(2rem, 5vw, 4rem) 0 var(--svp-section-y);
}

.cp-explorer-head {
  display: grid;
  justify-items: start;
  gap: 1.1rem;
  margin-bottom: clamp(1.8rem, 3.5vw, 2.8rem);
}

.cp-explorer-head p:not(.svp-pill) {
  max-width: 30rem;
  color: var(--cp-soft);
  font-size: 1.1rem;
}

.cp-dept + .cp-dept {
  margin-top: clamp(3rem, 6vw, 5.5rem);
}

.cp-dept-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 0.9fr);
  align-items: end;
  gap: 1rem clamp(1.2rem, 3vw, 3rem);
  padding-bottom: 1.4rem;
  margin-bottom: 1.6rem;
  border-bottom: 1px solid var(--cp-line);
}

.cp-dept-no {
  align-self: start;
  padding-top: 0.5rem;
  color: var(--pink);
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.cp-dept-area {
  color: var(--cp-soft);
  font-size: 0.95rem;
}

.cp-dept-name {
  color: var(--cp-ink);
  font-size: clamp(2rem, 4vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 0.98;
}

/* Ends on the page's right guide, like the homepage's right-hand copy. */
.cp-dept-blurb {
  justify-self: end;
  max-width: 26rem;
  text-align: right;
  color: var(--cp-soft);
  font-size: 1.05rem;
  line-height: 1.5;
}

/* Stacking department headers (all widths).
   No tabs: every team is listed. Each .cp-dept is display: contents,
   so its header is sticky against the whole panel list rather than its
   own section and stays pinned after its team has passed. Headers pin
   one below the other, each 4.1rem lower (--cp-i is the header's
   position in the list). Photos fade and shrink (--cp-tuck) as they
   slide under their own header's rule, and script.js raises the
   header's --cp-stack in step with them: the area label and blurb fade
   and the name rises, leaving a full-size "01 The Builders" row. */
.cp-panels .cp-dept {
  display: contents;
}

.cp-dept + .cp-dept {
  margin-top: 0;
}

.cp-dept + .cp-dept > .cp-dept-head {
  margin-top: clamp(3rem, 6vw, 5.5rem);
}

.cp-dept-head {
  position: sticky;
  /* script.js sets the exact top; this is the no-script fallback. */
  top: calc(6.5rem + var(--cp-i, 0) * 4.1rem);
  z-index: calc(5 + var(--cp-i, 0));
  padding-top: 0.6rem;
  background: #f6f6f8;
}

.cp-dept-area,
.cp-dept-blurb {
  opacity: calc(1 - var(--cp-stack, 0) * 1.6);
}

/* The name keeps its full size; it only rises into the space the
   faded area label leaves, so the stacked row reads "01 The Builders". */
.cp-dept-name {
  transform: translateY(calc(var(--cp-stack, 0) * -1.45rem));
}

.cp-person {
  transform-origin: 50% 0;
  transform: scale(calc(1 - var(--cp-tuck, 0) * 0.22));
  /* Fully gone by the time it clears the rule, so tucked photos do
     not ghost above the stacked headers behind the nav. */
  opacity: calc(1 - var(--cp-tuck, 0) * 1.25);
  will-change: transform, opacity;
}

/* Phones: the same stacking, with tighter slots and gaps so seven headers
   still leave room for a row of photos. */
@media (max-width: 768px) {
  .cp-dept-head {
    top: calc(5.5rem + var(--cp-i, 0) * 3.7rem);
    padding-top: 0.5rem;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
  }

  .cp-dept + .cp-dept > .cp-dept-head {
    margin-top: clamp(2rem, 8vw, 3rem);
  }

  .cp-dept-name {
    transform: translateY(calc(var(--cp-stack, 0) * -1.25rem));
  }
}

.cp-people {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 12.5rem), 1fr));
  gap: clamp(1rem, 2vw, 1.6rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cp-person-photo {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 24px;
  background: var(--cp-tile);
  transition: transform 500ms var(--ease-soft);
}

.cp-person:hover .cp-person-photo {
  transform: translateY(-4px);
}

.cp-person-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Placeholder portrait: a quiet head and shoulders until a photo lands. */
.cp-person-blank {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.85) 0 11%, transparent 11.5%),
    radial-gradient(ellipse 34% 26% at 50% 78%, rgba(255, 255, 255, 0.85) 0 99%, transparent 100%),
    linear-gradient(180deg, #f3f1f5, #e6e3ea);
}

.cp-person-name {
  margin-top: 0.8rem;
  color: var(--cp-ink);
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.cp-person-role {
  margin-top: 0.2rem;
  color: var(--cp-soft);
  font-size: 0.92rem;
  line-height: 1.3;
}

.cp-person.is-placeholder .cp-person-name,
.cp-person.is-placeholder .cp-person-role {
  color: rgba(46, 46, 46, 0.4);
}

/* ---- Team: culture band ------------------------------------------- */

/* The grey band is its own layer and behaves exactly like the
   homepage case study box (.cs-panel in index.html, same numbers): it
   arrives full-bleed and pulls in to a rounded box as the section
   scrolls up. --shrink-progress comes from the SHRINK PANELS script in
   script.js (0 = full bleed, 1 = boxed). Keep the two in step. */
.cp-culture {
  /* No section background (it used to carry .section-dark, whose
     full-bleed grey sat behind the panel and hid the shrink). */
  background: none;
  --cs-gutter: clamp(1.25rem, 3vw, 3rem);
  --cs-inset-max: clamp(0.75rem, 2.75vw, 2.75rem);
  position: relative;
  margin-bottom: clamp(3rem, 6vw, 5.5rem);
  padding: clamp(2rem, 3.5vw, 3rem) 0;
}

.cp-culture-panel {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(
    var(--shrink-progress, 1) *
      min(
        var(--cs-inset-max),
        max(0px, (100% - var(--boxed-guide-width) - 2 * var(--cs-gutter))) / 2
      )
  );
  right: calc(
    var(--shrink-progress, 1) *
      min(
        var(--cs-inset-max),
        max(0px, (100% - var(--boxed-guide-width) - 2 * var(--cs-gutter))) / 2
      )
  );
  border-radius: calc(min(var(--shrink-progress, 1) * 8, 1) * 42px);
  background: #2e2e2e;
  pointer-events: none;
}

.cp-culture .section-shell {
  position: relative;
  z-index: 1;
}

.cp-culture-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 2rem clamp(2rem, 6vw, 6rem);
  align-items: center;
}

.cp-culture-copy {
  display: grid;
  justify-items: start;
  gap: 1.2rem;
}

.cp-culture-title {
  color: #f4f4f4;
  font-size: clamp(3rem, 6vw, 5.4rem);
  font-weight: 800;
  line-height: 0.94;
  letter-spacing: -0.055em;
}

.cp-culture-copy p:not(.svp-pill) {
  max-width: 29rem;
  color: rgba(244, 244, 244, 0.74);
  font-size: 1.1rem;
  line-height: 1.55;
}

.cp-culture-copy .cp-culture-line {
  margin-top: 0.4rem;
  color: #f4f4f4;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.2;
}

.cp-culture-photos {
  position: relative;
  justify-self: center;
  width: min(100%, 32rem);
  aspect-ratio: 1 / 1;
}

/* Polaroids: the team-day stills, not the office portraits, so this
   section shows the side of Leadly that doesn't take itself seriously. */
.cp-cphoto {
  position: absolute;
  margin: 0;
  padding: 0.7rem 0.7rem 2.6rem;
  border-radius: 4px;
  background: #f4f4f4;
  /* Layered like real paper: a tight contact shadow at the edge, a
     soft mid shadow, and a faint wide one, all falling slightly down. */
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.28),
    0 6px 14px rgba(0, 0, 0, 0.22),
    0 18px 34px rgba(0, 0, 0, 0.16);
}

.cp-cphoto img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* Overlapping like a small pile: B tucks under A's right edge and C
   sits on top of both. */
.cp-cphoto-a {
  --rot: -7deg;
  --fx: -55%;
  --fy: 45%;
  --fr: -16deg;
  left: 2%;
  top: 6%;
  width: 50%;
  transform: rotate(var(--rot));
  z-index: 2;
}

.cp-cphoto-b {
  --rot: 5deg;
  --fx: 55%;
  --fy: 30%;
  --fr: 18deg;
  --delay: 140ms;
  right: 8%;
  top: 0;
  width: 50%;
  transform: rotate(var(--rot));
  z-index: 1;
}

.cp-cphoto-c {
  --rot: -2deg;
  --fx: 5%;
  --fy: 90%;
  --fr: 10deg;
  --delay: 300ms;
  left: 22%;
  bottom: 2%;
  width: 46%;
  transform: rotate(var(--rot));
  z-index: 3;
}

/* When the pile scrolls into view the polaroids throw themselves down one
   after another and settle with a small bounce. script.js adds .is-armed
   (hidden, thrown off to the side) and then .is-in when the pile is on
   screen. Without the script, or with reduced motion, they simply sit. */
.cp-culture-photos.is-armed .cp-cphoto {
  opacity: 0;
  transform: translate3d(var(--fx, 0), var(--fy, 0), 0)
    rotate(calc(var(--rot) + var(--fr, 0deg))) scale(0.8);
}

.cp-culture-photos.is-armed.is-in .cp-cphoto {
  opacity: 1;
  transform: rotate(var(--rot));
  transition:
    transform 950ms cubic-bezier(0.2, 1.3, 0.4, 1) var(--delay, 0ms),
    opacity 350ms ease var(--delay, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  .cp-culture-photos.is-armed .cp-cphoto,
  .cp-culture-photos.is-armed.is-in .cp-cphoto {
    opacity: 1;
    transform: rotate(var(--rot));
    transition: none;
  }
}

/* ---- Closing CTA (Team and Our Story) ------------------------------
   The homepage's closing collage, 100px narrower. The scene spans the
   full viewport so it centres on the page, not the padded shell. The
   artwork sits 1.83% left of centre in the file and only fills rows
   389-1305 of 1795, so it is nudged right and the empty bands above and
   below are cancelled with negative margins (fractions of 2700px). */

.company-page .svp-cta-scene {
  --cta-w: min(1420px, 100vw);
  display: flex;
  justify-content: center;
  width: 100vw;
  margin: 0 calc(50% - 50vw);
}

.company-page .svp-cta-scene picture {
  display: contents;
}

.company-page .svp-cta-scene img {
  flex: none;
  width: var(--cta-w);
  max-width: none;
  /* Left margin, not translate: svp-bob animates translate. In a centred
     flex row a left margin of 2 x 1.83% moves the image by 1.83%. */
  margin: calc(var(--cta-w) * -0.1441) 0 calc(var(--cta-w) * -0.1815) calc(var(--cta-w) * 0.0366);
}

/* Same type size and spacing as the homepage CTA, so the heading no
   longer dwarfs the paragraph or crowds the artwork above it. */
.company-page .svp-cta-copy {
  gap: 1.25rem;
  margin-top: clamp(1.5rem, 3vw, 3rem);
}

.company-page .svp-cta-title {
  margin-bottom: 0;
  font-size: clamp(2.6rem, 5.1vw, 4.56rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
}

/* Wide enough to set as two even lines, so the paragraph sits at about
   two-thirds of the title's width instead of a narrow three-line column. */
.company-page .svp-cta-copy p {
  max-width: 40rem;
  color: rgba(46, 46, 46, 0.72);
  font-size: clamp(1.05rem, 1.3vw, 1.2rem);
  line-height: 1.6;
  text-wrap: balance;
}

/* The paragraph follows the title's bounding box: the copy column shrinks
   to the title's width, and the paragraph takes that width (width 0 so it
   never widens the column itself), running edge to edge under it. */
.page-our-story .svp-cta-copy {
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
}

.page-our-story .svp-cta-copy p {
  width: 0;
  min-width: 100%;
  max-width: none;
  /* Scales with the title (about 0.235 of it) so it always sets as three
     full lines under it. */
  font-size: clamp(1rem, 1.2vw, 1.07rem);
  text-wrap: pretty;
}

.company-page .svp-cta-copy .svp-button {
  margin-top: 0.75rem;
}

/* ---- Responsive ---------------------------------------------------- */

@media (max-width: 1024px) {
  .cp-hero-layout {
    grid-template-columns: 1fr;
  }

  .cp-stage {
    justify-self: center;
    max-width: 34rem;
  }

  .cp-question-layout,
  .cp-culture-layout {
    grid-template-columns: 1fr;
  }

  .cp-dept-head {
    grid-template-columns: auto 1fr;
  }

  .cp-dept-blurb {
    grid-column: 1 / -1;
    justify-self: start;
    max-width: none;
    text-align: left;
  }
}

@media (max-width: 768px) {
  /* As on the homepage case study: the rail narrows so the box can
     still step in and the copy clears its edge. */
  .cp-culture-panel {
    left: calc(var(--shrink-progress, 1) * 0.75rem);
    right: calc(var(--shrink-progress, 1) * 0.75rem);
    border-radius: calc(min(var(--shrink-progress, 1) * 8, 1) * 28px);
  }

  .cp-culture .section-shell {
    width: calc(100% - 4rem);
  }

  /* The mobile collage is cropped tight to its artwork. */
  .company-page .svp-cta-scene img {
    width: min(100vw, 34rem);
    margin: 0;
  }

  .cp-step {
    grid-template-columns: 2.2rem minmax(0, 1fr);
    column-gap: 0.9rem;
    /* Year stacked over the copy here, so the dot stays by the year. */
    align-items: start;
  }

  .cp-step::before {
    left: 1.1rem;
  }

  .cp-steps::after {
    left: 1.1rem;
  }

  .cp-steps.is-live .cp-step-year {
    transform: translateX(0.4rem);
  }

  .cp-step:last-child::before {
    height: calc(clamp(2rem, 4vw, 3.2rem) + 1rem);
  }

  .cp-step-node {
    grid-column: 1;
    grid-row: 1;
  }

  .cp-step-year {
    grid-column: 2;
    grid-row: 1;
    justify-self: start;
    padding-right: 0;
    font-size: clamp(3rem, 15vw, 4.6rem);
  }

  .cp-step-copy {
    grid-column: 2;
    grid-row: 2;
    margin-top: 0.9rem;
    padding-left: 0;
  }

  .cp-step-node {
    margin-top: 0.3rem;
  }

  .cp-people {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .cp-strip {
    overflow-x: auto;
  }

  .cp-strip-track {
    animation: none;
  }

  .cp-polaroid,
  .cp-binoculars,
  .cp-float-shadow {
    animation: none;
  }
}

/* ---- Team page: one heading style --------------------------------
   Every title on the team page (hero, section intros, team names,
   culture band, closing CTA) uses the team-name style, the smallest
   of the set, so none of them shouts louder than another. Kept last
   so it outranks the per-section sizes above and in service-page.css. */
/* Team hero intro line, a step smaller than the service-page lead. */
.page-team .svp-hero-lead {
  max-width: 28rem;
  font-size: clamp(0.98rem, 1.15vw, 1.1rem);
}

.page-team :is(.svp-hero-title, .svp-heading, .cp-dept-name, .cp-culture-title, .svp-cta-title) {
  font-size: clamp(2rem, 4vw, 3.4rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.05em;
}

/* Phones: the tight desktop tracking crowds the letters at small sizes. */
@media (max-width: 768px) {
  .page-team :is(.svp-hero-title, .svp-heading, .cp-dept-name, .cp-culture-title, .svp-cta-title) {
    letter-spacing: -0.025em;
  }

  /* The page title a little bigger on a phone. */
  .page-team .cp-hero-title {
    font-size: clamp(2.5rem, 11.2vw, 3rem);
  }
}

/* ---- Our Story: a photo for each year, on hover --------------------
   Hovering a year brings up the photo for that milestone, as a polaroid
   (white card, deeper bottom margin, like the Team page header), in the
   empty space at the left of its row, clear of the year and the copy. It
   is hidden until then: it fades in, lifts and settles at a slight tilt,
   alternating left and right down the timeline. Pointer devices only;
   on touch and narrow screens the timeline is copy only. */
.cp-year-photo {
  display: none;
}

@media (hover: hover) and (pointer: fine) and (min-width: 769px) {
  [data-cp-photo]:hover {
    z-index: 40;
  }

  .cp-year-photo {
    --tilt: -4deg;
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 2;
    display: block;
    margin: 0;
    padding: 0.55rem 0.55rem 2.4rem;
    border-radius: 3px;
    background: #fff;
    box-shadow: 0 18px 40px rgba(46, 46, 46, 0.18), 0 2px 6px rgba(46, 46, 46, 0.08);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-42%) scale(0.86) rotate(calc(var(--tilt) * 2));
    transition:
      opacity 200ms ease,
      transform 260ms cubic-bezier(0.55, 0, 0.75, 0);
  }

  .cp-step:nth-child(even) .cp-year-photo {
    --tilt: 3deg;
  }

  .cp-year-photo.is-wide {
    width: 14.5rem;
  }

  .cp-year-photo.is-wide img {
    aspect-ratio: 3 / 2;
  }

  .cp-year-photo.is-tall {
    width: 11rem;
  }

  .cp-year-photo.is-tall img {
    aspect-ratio: 2 / 3;
  }

  .cp-year-photo img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  [data-cp-photo]:hover .cp-year-photo {
    opacity: 1;
    transform: translateY(-50%) scale(1) rotate(var(--tilt));
    transition:
      opacity 240ms ease,
      transform 560ms cubic-bezier(0.34, 1.45, 0.64, 1);
  }
}

/* Smaller laptops: the space left of the year shrinks, so do the photos. */
@media (hover: hover) and (pointer: fine) and (min-width: 769px) and (max-width: 1024px) {
  .cp-year-photo.is-wide {
    width: 11rem;
  }

  .cp-year-photo.is-tall {
    width: 8rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cp-year-photo,
  [data-cp-photo]:hover .cp-year-photo {
    transform: translateY(-50%) rotate(var(--tilt));
    transition: opacity 200ms ease;
  }
}

/* ---- Team: "Want to be part of it?" ----------------------------------
   Copy on the right; on the left our HR lead as a big die-cut sticker
   (white stroke baked into the image, made in ChatGPT from her portrait;
   originals in team-faces/hr-sticker), after the head sticker and
   "What next?" bubble in the menu on trevornoah.com.
   --join runs 0 -> 1 as the section scrolls in (JOIN STICKER script in
   script.js); the springy transition on it gives the bounce. With it
   she rises and swings up out of the corner and the top of her head
   peels back. The peel works like Noah's: .cp-join-fold is turned so
   its right-hand side points up; the stuck sticker is clipped
   --fold% short of that side, and a copy, clipped to the strip past the
   fold, is mirrored back across it and turned white, so the flap is
   her outline in sticker backing. The bubble rises from behind her. */
/* Less air between the culture box and the join section. */
.page-team .cp-culture {
  margin-bottom: clamp(2rem, 3.5vw, 3rem);
}

/* <main> clips on both axes (service-page.css); here only sideways,
   so the sticker can run on down behind the footer. */
.page-team main {
  overflow-x: clip;
  overflow-y: visible;
}

@property --join {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

/* Hover wiggle: a little extra peel, looping while the pointer is on her. */
@property --wiggle {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

/* How far the top of her head has peeled: 0 flat, 1 resting fold. */
@property --lift {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

.cp-join {
  --join: 0;
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(26rem, 36vw, 34rem);
  /* Clip sideways only: she runs on down behind the footer, which
     paints over her (same stacking level, later in the page). */
  overflow-x: clip;
  overflow-y: visible;
  padding: clamp(1rem, 2vw, 2rem) 0 clamp(2rem, 4vw, 3.5rem);
  transition: --join 600ms cubic-bezier(0.5, 1.8, 0.62, 1);
}

.cp-join-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  width: 100%;
  /* The layout spans over her; only the copy should take the pointer,
     so hovering her reaches the sticker. */
  pointer-events: none;
}

.cp-join-copy {
  grid-column: 2;
  pointer-events: auto;
  display: grid;
  justify-items: start;
  gap: 1.2rem;
}

.cp-join-copy p {
  max-width: 30rem;
  color: var(--cp-soft);
  font-size: clamp(1rem, 1.25vw, 1.125rem);
  line-height: 1.6;
}

.cp-join-copy .svp-button {
  margin-top: 0.6rem;
}

.cp-join-art {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.cp-join-head {
  --size: min(76vw, 66rem);
  --fold: calc(13 + var(--lift) * 6.5 + var(--wiggle));
  position: absolute;
  left: calc(var(--size) * -0.23);
  bottom: calc(var(--size) * -0.28);
  width: var(--size);
  aspect-ratio: 1;
  container-type: inline-size;
  transform-origin: 20% 90%;
  transform: translateY(calc((1 - var(--join)) * 62%))
    rotate(calc(19deg - (1 - var(--join)) * 26deg));
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.16));
}

/* She rises flat; once she is up, the top of her head slowly peels
   back to its resting fold. Replays each
   time the section scrolls back in. */
.cp-join.is-bubble .cp-join-head {
  animation: cp-join-peel 1100ms cubic-bezier(0.33, 0, 0.2, 1) 250ms both;
}

@keyframes cp-join-wiggle {
  0%,
  100% { --wiggle: 0; }
  50% { --wiggle: 2.6; }
}

@keyframes cp-join-peel {
  from { --lift: 0; }
  to { --lift: 1; }
}

.cp-join-fold {
  position: absolute;
  inset: 0;
  z-index: 1;
  transform: rotate(-90deg);
}

.cp-join-unpeeled,
.cp-join-peeled {
  position: absolute;
  inset: 0;
}

.cp-join-unpeeled {
  clip-path: inset(0 calc(var(--fold) * 1%) 0 0);
}

.cp-join-peeled {
  clip-path: inset(0 0 0 calc(100% - var(--fold) * 1%));
  transform-origin: calc(100% - var(--fold) * 1%) 50%;
  transform: scaleX(-1);
  filter: brightness(0) invert(1) drop-shadow(0 0 4px rgba(0, 0, 0, 0.22));
}

/* The sticker itself, turned back upright inside the turned fold box. */
.cp-join-face {
  position: absolute;
  inset: 15%;
  background: center / contain no-repeat;
  transform: rotate(90deg);
}

.cp-join-wink {
  opacity: 0;
  transition: opacity 120ms linear;
}

/* A rough-edged paper bubble to the left of her head, behind her
   until she is up. */
.cp-join-bubble {
  position: absolute;
  left: 12%;
  top: 22%;
  z-index: 0;
  width: 22%;
  transform: translate(40%, 120%) rotate(-28deg);
  transform-origin: 90% 100%;
  transition: transform 600ms cubic-bezier(0.5, 1.8, 0.62, 1);
}

.cp-join.is-bubble .cp-join-bubble {
  transform: rotate(-12deg);
  transition-delay: 200ms;
}

.cp-join-bubble svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  fill: var(--pink, #ff0099);
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.14));
  /* Flipped, so the tail points right, down to her head. */
  transform: scaleX(-1);
}

.cp-join-bubble span {
  position: absolute;
  left: 0;
  right: 0;
  top: 37%;
  color: #ffffff;
  font: 700 2.65cqi/1 var(--font-display);
  letter-spacing: -0.02em;
  text-align: center;
  transform: translateY(-50%);
}

@media (hover: hover) and (pointer: fine) {
  .cp-join-head {
    pointer-events: auto;
  }

  /* Set on the wrapper, not the head, so it never replaces (and so
     never replays) the head's peel-on animation. */
  .cp-join-art:has(.cp-join-head:hover) {
    animation: cp-join-wiggle 1300ms ease-in-out infinite;
  }

  .cp-join-head:hover .cp-join-wink {
    opacity: 1;
  }
}

@media (max-width: 768px) {
  .cp-join {
    align-items: flex-start;
    min-height: 0;
    padding-bottom: 80vw;
  }

  .cp-join-layout {
    grid-template-columns: 1fr;
  }

  /* Centred on a phone: title, text and button. */
  .cp-join-copy {
    grid-column: 1;
    justify-items: center;
    text-align: center;
  }

  .cp-join-copy p {
    margin-inline: auto;
  }

  /* Bigger on a phone, and pulled left so her face sits in the middle of
     the screen rather than off to one side. */
  .cp-join-head {
    --size: 136vw;
    left: -34vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cp-join,
  .cp-join-bubble {
    transition: none;
  }

  .cp-join.is-bubble .cp-join-head {
    animation: none;
    --lift: 1;
  }

  .cp-join-art:has(.cp-join-head:hover) {
    animation: none;
  }
}

/* ============================================================
   Team page: Glassdoor reviews. Desktop pins the section and a single
   line of landscape cards travels right to left across it, driven by
   scroll (--reviews-x, written by script.js), the way Quoti's cards do.
   Tablet and below: a swipeable row.
   ============================================================ */
.cp-reviews {
  position: relative;
  overflow-x: clip;
  padding: clamp(2rem, 5vw, 4rem) 0 var(--svp-section-y);
}

.cp-reviews-headrow {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem 2rem;
}

/* Centre the button on the title line (team titles: clamp(2rem, 4vw, 3.4rem) at 0.98). */
.cp-reviews-headrow > .button {
  margin-top: calc((clamp(2rem, 4vw, 3.4rem) * 0.98 - 50px) / 2);
}

.cp-reviews-headrow .cp-explorer-head {
  margin-bottom: 0;
}

@media (max-width: 720px) {
  .cp-reviews-headrow {
    flex-direction: column;
    align-items: flex-start;
  }

  .cp-reviews-headrow > .button {
    margin-top: 0;
  }
}

.cp-reviews-rail {
  /* Above the heading, so the dog riding the cards hides the title and
     subtitle as it passes over them. */
  position: relative;
  z-index: 3;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

.cp-reviews-track {
  --card-w: clamp(27rem, 36vw, 34rem);
  --card-gap: clamp(1rem, 1.6vw, 1.5rem);
  --dog-w: clamp(15rem, 19vw, 20rem);
  position: relative;
  display: flex;
  gap: var(--card-gap);
  margin: 0;
  padding: 1rem 0;
  list-style: none;
  width: max-content;
  transform: translate3d(var(--reviews-x, 0px), 0, 0);
  will-change: transform;
}

.cp-review {
  --tilt: -1.2deg;
  --lift: 0px;
  display: flex;
  flex: 0 0 var(--card-w);
  flex-direction: column;
  justify-content: space-between;
  gap: 2.5rem;
  min-height: clamp(12rem, 15vw, 14rem);
  padding: clamp(1.5rem, 2vw, 2rem);
  border-radius: 1.4rem;
  background: var(--cp-ink);
  color: #f4f4f4;
  box-shadow: 0 18px 40px rgba(46, 46, 46, 0.18);
  transform: translateY(var(--lift)) rotate(var(--rot, var(--tilt)));
}

.cp-review:nth-child(even) {
  --tilt: 1deg;
  --lift: 1rem;
  background: #fff;
  color: var(--cp-ink);
  box-shadow: 0 18px 40px rgba(46, 46, 46, 0.1);
}

.cp-review:nth-child(3n) {
  --tilt: -0.4deg;
  --lift: 0.4rem;
}

.cp-review-quote {
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 2.2vw, 2rem);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.025em;
}

/* Fifth card: links out to Glassdoor. The whole card is the link. */
.cp-review.cp-review-cta {
  flex-basis: calc(var(--card-w) * 1.14);
  min-height: clamp(17rem, 21vw, 21rem);
  position: relative;
  background: var(--pink);
  color: #fff;
  box-shadow: 0 18px 40px rgba(255, 0, 153, 0.22);
}

.cp-review-cta .cp-review-quote {
  margin-block: auto;
  text-align: center;
}

.cp-review-cta .cp-review-quote {
  font-size: clamp(1.9rem, 2.7vw, 2.5rem);
}

.cp-review-cta-link {
  display: grid;
  justify-items: center;
  gap: 1.1rem;
  color: #fff;
}

.cp-review-cta-button {
  display: inline-flex;
  align-items: center;
  min-height: 2.9rem;
  padding: 0 1.7rem;
  border-radius: 999px;
  background: #fff;
  color: var(--cp-ink);
  font-size: 1rem;
  font-weight: 600;
  box-shadow: 0 10px 24px rgba(46, 46, 46, 0.18);
  transition: transform var(--motion-base, 300ms) var(--ease-standard, ease);
}

.cp-review-cta:hover .cp-review-cta-button,
.cp-review-cta:focus-within .cp-review-cta-button {
  transform: translateY(-2px);
}

.cp-review-cta-link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.cp-review-cta-logo {
  display: block;
  width: clamp(7.5rem, 9vw, 9rem);
  height: auto;
}

.cp-review-source {
  color: var(--pink);
  font-size: 0.875rem;
  font-weight: 500;
}

/* Pinned and scroll-driven at every width (script.js adds .is-pinned unless
   the visitor prefers reduced motion). */
.cp-reviews.is-pinned {
  height: var(--reviews-height, 300vh);
  padding: 0;
}

.cp-reviews.is-pinned .cp-reviews-stick {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  padding: 6rem 0 2rem;
}

/* Reduced motion: no pinning, a plain swipeable row. */
.cp-reviews:not(.is-pinned) .cp-reviews-track {
  width: auto;
  padding: 0.5rem calc((100vw - var(--shell)) / 2) 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  transform: none;
}

.cp-reviews:not(.is-pinned) .cp-reviews-track::-webkit-scrollbar {
  display: none;
}

.cp-reviews:not(.is-pinned) .cp-review {
  scroll-snap-align: start;
}

/* Phones: smaller cards and type, the same line of cards passing as you
   scroll. */
@media (max-width: 768px) {
  .cp-reviews-track {
    --card-w: min(80vw, 21rem);
    --dog-w: 12.5rem;
  }

  /* The stage is only as tall as its content here (script.js centres it in
     the screen while it is pinned), so there is no empty screen-height
     space above the title or below the cards. */
  .cp-culture {
    margin-bottom: 1.5rem;
  }

  .cp-reviews.is-pinned .cp-reviews-stick {
    justify-content: flex-start;
    min-height: 0;
    /* A little extra underneath for the bonbon hanging off the last card. */
    padding: 1.5rem 0 4.75rem;
  }

  .cp-review {
    min-height: 0;
    gap: 1.5rem;
  }

  .cp-review-quote {
    font-size: 1.3rem;
    line-height: 1.22;
  }

  .cp-review-cta {
    min-height: 0;
  }

  .cp-review-cta .cp-review-quote {
    font-size: 1.7rem;
  }

  .cp-review-cta-logo {
    width: 6.5rem;
  }

  .cp-review-bonbon {
    --bonbon-w: 8.5rem;
    bottom: -2.4rem;
  }

  .cp-review-dog {
    top: calc(-8rem + 10px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cp-reviews-track {
    transform: none;
  }
}

/* The inflatable dog rides the line of cards, in front of the gap between
   the second and third card so it overlaps both. */
.cp-review-dog {
  position: absolute;
  /* Behind the cards (the track is its own stacking context), looking
     over the top edge of the gap between the second and third card. */
  z-index: -1;
  top: calc(-13rem + 80px);
  left: calc(2 * var(--card-w) + 1.5 * var(--card-gap) - var(--dog-w) / 2);
  width: var(--dog-w);
  list-style: none;
  pointer-events: none;
  transform: rotate(var(--rot, -14deg));
}

.cp-review-dog img {
  display: block;
  width: 100%;
  height: auto;
  animation: cp-dog-bob 5.5s ease-in-out infinite;
}

@keyframes cp-dog-bob {
  0%,
  100% {
    transform: translateY(-6px) rotate(-2deg);
  }
  50% {
    transform: translateY(6px) rotate(2deg);
  }
}

/* The foil bonbon sits in front of the gap between the fourth card and the
   Glassdoor card, hanging over the bottom edge of both, so it is still on
   screen when the last card parks in the middle. */
.cp-review-bonbon {
  --bonbon-w: clamp(11rem, 14vw, 14.5rem);
  position: absolute;
  z-index: 4;
  bottom: -3.4rem;
  left: calc(4 * var(--card-w) + 3.5 * var(--card-gap) - var(--bonbon-w) / 2);
  width: var(--bonbon-w);
  list-style: none;
  pointer-events: none;
  transform: rotate(var(--rot, -12deg));
}

.cp-review-bonbon img {
  display: block;
  width: 100%;
  height: auto;
  animation: cp-dog-bob 6.4s ease-in-out -1.5s infinite;
}

@media (prefers-reduced-motion: reduce) {
  .cp-review-dog,
  .cp-review-bonbon {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cp-review-dog img,
  .cp-review-bonbon img {
    animation: none;
  }
}

/* Team: a person without a photo yet keeps an empty, solid light-grey box. */
.cp-person-photo.is-empty {
  background: #e4e4e7;
}