/* ---- Perle palette -------------------------------------------------------
   Retheme the inherited BDB tokens to the Perle marks (#EA3AA0 / #0B0B0D /
   #F2F3F5). Recolouring the tokens rather than the rules repaints every
   component that referenced them, including ones not touched by hand. */
/* Declared on :root AND body — the inherited theme re-declares the palette
   below :root, so :root alone only recolours <html>. */
:root,
body {
  --color--passionate-pink: #ea3aa0 !important;
  --color--billion-dollar-blue: #ea3aa0 !important;
  --color--brave-black: #0b0b0d !important;
  --color--off-white: #f2f3f5 !important;
  --color--magnetic-grey: #f7e9f1 !important;
  --color--spark-blue: #ffd9ec !important;
  --color--energetic-red: #c81e7a !important;
}

/* The hero keeps the near-black ground so the pink circle has something to
   grow against — everywhere else the old blue is now Perle pink.
   Selector matches style.css's `.s.is-home-hero` specificity. */
.s.is-home-hero {
  background-color: var(--color--brave-black);
}
.s.is-home-hero .u-h1,
.s.is-home-hero .u-h1 * {
  color: var(--color--off-white);
}

/* ---- Two-column editorial sections --------------------------------------
   The inherited layouts were a single centred column, which left long copy
   as one narrow ragged block. These run heading-left / copy-right, and split
   the type into three weights: pink display heading, off-white lead, muted
   body — so the eye gets a hierarchy instead of a wall of one colour. */
.statement-main__layout.is-perle-2col,
.ft-framework__layout.is-perle-2col {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: var(--gap-4, 4em) var(--gap-6, 6em);
  align-items: start;
  text-align: left;
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

/* The centred single-column rules are scoped to the old layout, so the
   inner wrapper needs its centring undone too. */
.statement-main__layout.is-perle-2col .statement-main__content {
  align-items: flex-start;
  max-width: 58ch;
  text-align: left;
}

.statement-main__layout.is-perle-2col .u-h2,
.ft-framework__layout.is-perle-2col .u-h3 {
  color: var(--color--passionate-pink);
  margin: 0;
}

.is-perle-lead {
  color: var(--color--off-white);
  margin: 0 0 0.75em;
}
.is-perle-body {
  color: rgba(242, 243, 245, 0.72);
  margin: 0 0 1em;
}
.is-perle-body:last-of-type {
  margin-bottom: 0;
}
.is-perle-kicker {
  color: rgba(242, 243, 245, 0.55);
  margin: 0;
}

/* A pink rule under the heading to anchor the left column. */
.statement-main__layout.is-perle-2col .statement-main__he::after,
.ft-framework__layout.is-perle-2col .ft-framework__he::after {
  content: "";
  display: block;
  width: 3.5rem;
  height: 3px;
  margin-top: 1.25em;
  background: var(--color--passionate-pink);
}

.ft-framework__layout.is-perle-2col .ft-framework__content {
  gap: 0;
}
.ft-framework__layout.is-perle-2col .ft-framework__btn {
  margin-top: 2em;
}

@media screen and (max-width: 991px) {
  .statement-main__layout.is-perle-2col,
  .ft-framework__layout.is-perle-2col {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--gap-2-5, 2.5em);
  }
}

/* The nav bar inherited the recoloured blue token, which turned it pink.
   Keep it near-black with off-white type — that also gives the pink circle
   mark the ground it needs to read. */
.nav-w,
.nav-w[data-theme] {
  background-color: var(--color--brave-black);
  color: var(--color--off-white);
}
.nav-w [data-nav-logo],
.nav-w .nav__logo-text,
.nav-w .nav__item {
  color: var(--color--off-white);
}

div.background[data-animation="home-hero"] { display: none !important; }

/* The capabilities section sits in normal flow: the wheel-capture in
   rebuild.js spins the barrel while the pointer is over it, so there is no
   pinning or extra scroll distance to reserve. */
.perle-pin-inner .ft-solutions__layout {
  padding-top: 4em;
  padding-bottom: 4em;
}

/* ---- Capabilities barrel -------------------------------------------------
   A rebuild of the site's 3D cylinder selector. The hosted module renders the
   same geometry but never advances off the first item in this offline copy,
   so it is detached and rebuild.js drives the barrel on scroll instead.
   Constants are measured from the live component: the items span a 162deg
   arc, the cylinder radius is 2.167x the item height, and opacity falls off
   hard past one step. This file owns the frame; rebuild.js writes the
   per-item transforms. */
.ft-solutions__ul {
  position: relative;
  transform-style: preserve-3d;
  perspective: 1200px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.ft-solutions__li {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transform-origin: center center;
  backface-visibility: hidden;
  will-change: transform, opacity;
  transition: opacity 0.3s linear;
}
.ft-solutions__ul.is-eased .ft-solutions__li {
  transition:
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.ft-solutions__li .u-h1 {
  margin: 0;
  /* Sized from the reference, which sets these at 160px in an 845px column at
     a 1800px viewport (8.9vw, line-height 0.9, tracking -0.04em). Set in
     Archivo — the Perle face — at a condensed width rather than the
     reference's Futura, which also buys room for the longer words. */
  font-family: var(--perle-sans);
  font-stretch: 78%;
  font-weight: 800;
  font-size: clamp(2.25rem, 7.2vw, 8.5rem);
  letter-spacing: -0.035em;
  line-height: 0.9;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 0.35s ease;
}
.ft-solutions__li.is-cap-active .u-h1 {
  color: var(--color--passionate-pink);
}

.ft-solutions__description.is-default { display: none; }
.ft-solutions__desc-item { display: none; }
.ft-solutions__desc-item.is-cap-active { display: block; }

@media (prefers-reduced-motion: reduce) {
  .ft-solutions__li { transition-duration: 0.01ms; }
}

/* The 50em bottom padding on the hero is a spacer meant to be eaten up by a
   scroll-pinned reveal animation (GSAP ScrollTrigger) from the site's own
   hosted JS, which we don't have. Collapse it so the page scrolls normally. */
.hero-home__content { padding-bottom: 3em !important; }


/* The site's own Webflow interactions fade the nav in on load via inline
   opacity:0, waiting for a trigger from the hosted app.js we don't have.
   Force it visible so the (new Perle) logo and nav are actually seen. */
.nav-w, .nav-w [data-nav-logo], .nav-w .nav, .nav-w .nav__cta {
  opacity: 1 !important;
}


/* ---- Type -----------------------------------------------------------------
   Archivo is the face the Perle logo is drawn in, so it now carries the
   display voice: the wordmark, the hero, and section kickers. PP Editorial
   New stays for the serif counterpoint, which is what gives the pairing its
   contrast. (Archivo was referenced by the logo from the start but was never
   actually loaded — it was falling back to system sans until now.) */
/* The hero keeps Futura ND Condensed: it was drawn for a condensed face, and
   setting it in expanded Archivo made the lines run far too wide. */
.s.is-home-hero .u-h1 {
  font-size: clamp(2.75rem, 7.6vw, 7rem);
  letter-spacing: -0.02em;
  line-height: 0.96;
}
/* The serif half of the hero line keeps its editorial face. */
.s.is-home-hero .u-h1 .u-font-editorial {
  font-family: var(--perle-serif);
  font-stretch: normal;
  font-weight: 400;
  letter-spacing: -0.01em;
}

/* Section kickers ("WHAT WE DO") in Archivo, tracked out. */
.ft-solutions__sub .u-h4 {
  font-family: 'Archivo', 'Futura ND Condensed', sans-serif;
  font-stretch: 100%;
  font-weight: 700;
  font-size: clamp(0.9rem, 1.5vw, 1.25rem);
  letter-spacing: 0.14em;
  white-space: nowrap;
}

/* Body copy gets a touch more air than the inherited setting. */
.is-perle-lead { line-height: 1.35; }
.is-perle-body { line-height: 1.55; }


/* Hero: the serif clause is the pink accent, and the block sits lower so it
   doesn't crowd the nav. The colour rule has to out-specify the off-white
   set on `.u-h1 *` above. */
.s.is-home-hero .u-h1 .u-font-editorial,
.s.is-home-hero .u-h1 .u-font-editorial * {
  color: var(--color--passionate-pink);
}
.s.is-home-hero .hero-home__content {
  padding-top: 12vh;
}
@media screen and (max-width: 767px) {
  .s.is-home-hero .hero-home__content { padding-top: 6vh; }
}

/* "Attention is the job." — the copy column was set at body size next to a
   display heading; bring it up so the two columns read as a pair. */
.statement-main__layout.is-perle-2col .is-perle-lead {
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  line-height: 1.25;
}
.statement-main__layout.is-perle-2col .is-perle-body {
  font-size: clamp(1.15rem, 1.8vw, 1.6rem);
  line-height: 1.45;
}

/* "Let's talk" CTA — in the Archivo display face rather than the serif, with
   the italic word carrying the pink accent. */
.cta__main .u-h2 {
  font-family: 'Archivo', sans-serif;
  font-stretch: 125%;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 0.95;
}
.cta__main .u-h2 .u-text-italic {
  font-style: normal;
  color: var(--color--passionate-pink);
}


/* "Let's talk" on one line, sized to fit its column. */
.cta__main .u-h2 {
  white-space: nowrap;
  font-size: clamp(2rem, 6.5vw, 6rem);
}
/* The CTA heading's column only spans 3 of 12 — widen it so the one-line
   heading fits inside its own box instead of spilling past it. */
.cta__layout .cta__main {
  grid-column: 1 / span 8;
}
@media screen and (max-width: 991px) {
  .cta__layout .cta__main { grid-column: 1 / -1; }
}

/* Founder section: the inherited 11.875em top/bottom padding made it far
   taller than its content needs. */
.ft-framework__layout.is-perle-2col {
  padding-top: 5em;
  padding-bottom: 5em;
}


/* Intro: the site's own animation blows the logo up to scale(5) before
   settling to 1, which is far larger than it needs to be. Overriding the
   transform with !important beats the inline scale it writes each frame, so
   this replaces that curve rather than fighting it frame by frame.
   (A CSS animation outranks an inline style in the cascade, so no !important
   is needed — and adding one would override the keyframes themselves.) */
@keyframes perle-logo-intro {
  from { transform: scale(2); }
  to   { transform: scale(1); }
}
.nav__logo {
  transform-origin: 0 50%;
  animation: perle-logo-intro 1.1s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@media (prefers-reduced-motion: reduce) {
  .nav__logo { animation: none; }
}


/* Kicker and description tracked to the reference's proportions too:
   40px and 30px against its 1800px viewport. */
.ft-solutions__sub .u-h4 { font-size: clamp(1rem, 2.2vw, 2.5rem); }
.ft-solutions__desc-item .u-h4 { font-size: clamp(1.05rem, 1.7vw, 1.9rem); }


/* ---- Typeface pairing -----------------------------------------------------
   Replaces the three inherited BDB faces (Futura ND Condensed, Neue Haas
   Grotesk Display, PP Editorial New) with Archivo + Instrument Serif.
   Archivo is the face the Perle logo is drawn in and is variable on both
   width and weight, so one family covers display and text; Instrument Serif
   is the editorial counterpoint. Mapped by overriding the faces themselves so
   every component that referenced them follows, rather than rule by rule. */
:root {
  --perle-sans: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --perle-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
}

body,
p, li, a, span, div, button, input, textarea, label,
.u-paragraph, .u-paragraph-s, .u-paragraph-xs, .u-paragraph-l, .u-paragraph-xl {
  font-family: var(--perle-sans);
}

/* Display sans: slightly narrowed, since Archivo at normal width sets wider
   than the condensed face it replaces. */
.u-h1, .u-h2, .u-h3, .u-h4, .u-h5, .u-h6,
.u-font-futuracn {
  font-family: var(--perle-sans);
  font-stretch: 88%;
  letter-spacing: -0.02em;
}

/* Editorial serif wherever the old one was used. */
.u-font-editorial,
.is-homepage-hero-editorial .u-font-editorial,
.ft-solutions__desc-item .u-h4,
.u-text-italic {
  font-family: var(--perle-serif);
  font-stretch: normal;
  font-weight: 400;
}
.u-text-italic { font-style: italic; }

/* Instrument Serif runs smaller on the body than PP Editorial New did, so the
   serif moments need a nudge up to hold their weight beside the sans. */
.s.is-home-hero .u-h1 .u-font-editorial {
  font-size: 1.08em;
  /* Instrument Serif sits tight against the sans; open the gap a touch. */
  margin-left: 0.14em;
}
.statement-main__layout.is-perle-2col .u-h2 { font-size: 1.06em; }

/* ---- The Clubhouse ---------------------------------------------------------
   On the landing page the Clubhouse sits on black with the lockup's own
   yellow (#F2D044) type; the green is reserved for the Clubhouse's own page.
   The lockup is the keyed-out artwork split into two layers — the word with
   the key removed, and the key on its own — so the key can turn on hover.
   Two hairline-ruled tickers in white frame the block, the same marquee
   language the case-study banners use, which also keeps it from melting into
   the black founder section above it. */
:root {
  --clubhouse-white: #ffffff;
  --clubhouse-yellow: #f2d044;
  --clubhouse-black: #050506;
}
.s.perle-clubhouse,
.s.perle-clubhouse .c {
  background-color: var(--clubhouse-black);
}
.s.perle-clubhouse {
  position: relative;
  overflow: hidden;
}
.perle-clubhouse .c {
  position: relative;
  padding-top: 7em;
  padding-bottom: 7em;
}

/* Cursor spotlight: a soft yellow pool that follows the pointer across the
   black, like a torch in a dark house. Position is written to --spot-x/y by
   rebuild.js; it fades in only while the pointer is over the section. */
.perle-clubhouse__spot {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease;
  background: radial-gradient(
    28rem circle at var(--spot-x, 50%) var(--spot-y, 50%),
    rgba(242, 208, 68, 0.12),
    rgba(242, 208, 68, 0.04) 40%,
    transparent 70%
  );
}
.perle-clubhouse.is-lit .perle-clubhouse__spot { opacity: 1; }

.perle-clubhouse__link {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2em;
  text-decoration: none;
  text-align: center;
}
.perle-clubhouse__logo {
  position: relative;
  display: block;
  width: min(44rem, 82%);
  aspect-ratio: 2.1222;
  filter: drop-shadow(0 0 0 rgba(242, 208, 68, 0));
  perspective: 60rem;
  transition:
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.6s ease;
}
.perle-clubhouse__logo-img {
  display: block;
  width: 100%;
  height: auto;
  translate: 0 0 !important;
}
/* The key: its own layer, placed by the crop box measured off the artwork so
   it lands exactly where the "l" was. On hover it turns a full revolution
   about its shaft — unlocking — and turns back when the pointer leaves. */
.perle-clubhouse__logo-key {
  position: absolute;
  left: 15.079%;
  top: 26.919%;
  width: 8.355%;
  height: 51.676%;
  transform-origin: 50% 50%;
  transform: rotateY(0deg);
  transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, translate, scale;
  /* Arrival start state: the key alone, centred on the lockup, larger, and
     tilted. The key's centre sits at 19.26% of the lockup width; moving it to
     50% is 30.74% of the lockup, which is 368% of the key's own width. */
  opacity: 0;
  translate: 368% 0;
  scale: 1.6;
  rotate: -10deg;
}
.perle-clubhouse__link:hover .perle-clubhouse__logo {
  transform: scale(1.025);
  filter: drop-shadow(0 0 2.5rem rgba(242, 208, 68, 0.26));
}
.perle-clubhouse__link:hover .perle-clubhouse__logo-key {
  transform: rotateY(360deg);
}
.perle-clubhouse__tag {
  margin: 0;
  max-width: 34ch;
  font-family: var(--perle-sans);
  font-size: clamp(1rem, 1.35vw, 1.25rem);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.72);
}
.perle-clubhouse__tag em {
  display: block;
  margin-top: 0.35em;
  font-family: var(--perle-serif);
  font-style: italic;
  font-size: 1.35em;
  color: var(--clubhouse-yellow);
}
.perle-clubhouse__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  margin-top: 0.5em;
  padding: 1em 1.8em;
  border: 1px solid rgba(242, 208, 68, 0.55);
  font-family: var(--perle-sans);
  font-size: clamp(0.8rem, 1vw, 0.95rem);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--clubhouse-yellow);
  transition:
    background-color 0.35s ease,
    color 0.35s ease,
    border-color 0.35s ease;
}
.perle-clubhouse__key {
  font-size: 1.35em;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Hover fills the button and turns the key — the unlock. */
.perle-clubhouse__link:hover .perle-clubhouse__cta {
  background-color: var(--clubhouse-yellow);
  border-color: var(--clubhouse-yellow);
  color: var(--clubhouse-black);
}
.perle-clubhouse__link:hover .perle-clubhouse__key {
  transform: rotate(90deg);
}

/* Scroll reveal (class set by rebuild.js once the lockup is in view): the key
   arrives first — appears in the centre, holds a beat, slides left into its
   slot in the word — and the word, tagline and CTA fade in behind it in turn. */
@keyframes perle-key-arrive {
  0%   { opacity: 0; translate: 368% 0; scale: 1.6; rotate: -10deg; }
  18%  { opacity: 1; translate: 368% 0; scale: 1.6; rotate: -10deg; }
  42%  { opacity: 1; translate: 368% 0; scale: 1.6; rotate: -10deg; }
  100% { opacity: 1; translate: 0 0;    scale: 1;   rotate: 0deg; }
}
.perle-clubhouse.is-in .perle-clubhouse__logo-key {
  animation: perle-key-arrive 2s cubic-bezier(0.65, 0, 0.2, 1) both;
}
.perle-clubhouse__logo-img,
.perle-clubhouse__tag,
.perle-clubhouse__cta {
  opacity: 0;
  translate: 0 1.5rem;
  transition:
    opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    translate 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.6s ease,
    background-color 0.35s ease,
    color 0.35s ease,
    border-color 0.35s ease;
}
.perle-clubhouse.is-in .perle-clubhouse__logo-img,
.perle-clubhouse.is-in .perle-clubhouse__tag,
.perle-clubhouse.is-in .perle-clubhouse__cta {
  opacity: 1;
  translate: 0 0;
}
/* The word starts fading in as the key is landing; the rest follows. */
.perle-clubhouse.is-in .perle-clubhouse__logo-img { transition-delay: 1.5s; }
.perle-clubhouse.is-in .perle-clubhouse__tag { transition-delay: 1.9s; }
.perle-clubhouse.is-in .perle-clubhouse__cta { transition-delay: 2.1s; }
/* Hover transitions shouldn't inherit the reveal delay. */
.perle-clubhouse.is-in .perle-clubhouse__link:hover .perle-clubhouse__cta { transition-delay: 0s; }

/* Tickers: white type on black between hairlines, top and bottom, running
   in opposite directions. Content is duplicated in the markup so a -50%
   translate loops seamlessly. */
.perle-clubhouse__ticker {
  position: relative;
  overflow: hidden;
  background-color: var(--clubhouse-black);
  color: var(--clubhouse-white);
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
  padding: 0.7em 0;
}
.perle-clubhouse__ticker-track {
  display: flex;
  width: max-content;
  animation: perle-ticker 38s linear infinite;
}
.perle-clubhouse__ticker.is-rtl .perle-clubhouse__ticker-track {
  animation-direction: reverse;
}
.perle-clubhouse:hover .perle-clubhouse__ticker-track {
  animation-play-state: running;
}
.perle-clubhouse__ticker-list {
  display: flex;
  flex: none;
  align-items: center;
}
.perle-clubhouse__ticker-item {
  display: inline-flex;
  align-items: center;
  font-family: var(--perle-sans);
  font-size: clamp(0.72rem, 0.9vw, 0.9rem);
  font-weight: 800;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  white-space: nowrap;
}
.perle-clubhouse__ticker-dot {
  display: inline-block;
  width: 0.4em;
  height: 0.4em;
  margin: 0 1.8em;
  border-radius: 50%;
  background: currentColor;
}
@keyframes perle-ticker {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

@media screen and (max-width: 767px) {
  .perle-clubhouse .c { padding-top: 4.5em; padding-bottom: 4.5em; }
  .perle-clubhouse__logo { width: 92%; }
  .perle-clubhouse__spot { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .perle-clubhouse__logo-img,
  .perle-clubhouse__logo-key,
  .perle-clubhouse__tag,
  .perle-clubhouse__cta,
  .perle-clubhouse__key {
    transition: none;
    animation: none;
    opacity: 1;
    translate: 0 0;
    scale: 1;
    rotate: 0deg;
  }
  .perle-clubhouse__ticker-track { animation: none; }
  .perle-clubhouse__spot { display: none; }
}

/* CTA: a contact line under the invitation, so the section actually gives
   people a way to reach you. */
.perle-cta__contact {
  margin-top: 1.4em;
  line-height: 1.6;
  color: rgba(11, 11, 13, 0.62);
}
.perle-cta__contact a {
  color: var(--color--passionate-pink);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}


/* ---- Ice-blue accent ------------------------------------------------------
   A third colour, used sparingly: the Miami Vice pink-and-black is the
   palette, and the icy blue is the trim. It only ever shows up as a small
   detail — a full stop, a kicker, a bullet, a segment of a rule, a hover
   state, every other case-study banner. Nothing large is painted in it. */
:root,
body {
  --perle-ice: #6fd0f0;
}

/* Hero: the full stop that closes the line is ice — echoing the dot in the
   PERLE. wordmark, where the dot is the accent. */
.s.is-home-hero .u-h1 .perle-ice-dot,
.s.is-home-hero .u-h1 .perle-ice-dot * {
  color: var(--perle-ice);
}
/* Text selection across the site. */
::selection {
  background-color: var(--perle-ice);
  color: var(--color--brave-black);
}
/* The bullet in front of the capabilities description. */
.ft-solutions__desc-item [data-css="text-indent"]::before {
  background-color: var(--perle-ice);
}
/* Case-study hover banners alternate pink and ice. */
.ft-cases__li:nth-child(even) .ft-cases__banner {
  background-color: var(--perle-ice) !important;
}

/* Section kicker in ice. */
.ft-solutions__sub .u-h4,
.is-perle-kicker {
  color: var(--perle-ice);
}

/* The pink rule under the two-column headings ends in a short blue segment. */
.statement-main__layout.is-perle-2col .statement-main__he::after,
.ft-framework__layout.is-perle-2col .ft-framework__he::after {
  background: linear-gradient(90deg, var(--color--passionate-pink) 0 72%, var(--perle-ice) 72% 100%);
}

/* Hover states: the CTA arrow button and the contact link go ice. */
.btn-inner.is-secondary.is-icon-only:hover {
  background-color: var(--perle-ice);
}
.btn-inner.is-secondary.is-icon-only:hover * {
  color: var(--color--brave-black);
}
.perle-cta__contact a:hover {
  color: var(--perle-ice);
}
/* Nav "Get in touch" hover. */
.nav__cta .btn-inner.is-btn-main:hover {
  background-color: var(--perle-ice);
  color: var(--color--brave-black);
}
/* Logo: the dot stays pink; the circle mark picks up a thin ice ring. */
.nav-w .perle-logo__mark {
  box-shadow: 0 0 0 2px var(--color--brave-black), 0 0 0 3.5px var(--perle-ice);
}


/* ---- Placeholders -----------------------------------------------------------
   Every asset the client still owes is a labelled SVG in assets/images/ph-*.svg
   (name, ratio, pixel size, format written on the tile), so the page reads as
   a spec sheet until the real files land. Swapping the src is the only change
   needed. The list matches the "What we need from you" writeup. */

/* Hero: headline on the left, a column of portrait thumbnails down the
   right-hand edge, as on the original site. The column sits taller than
   the hero and drifts upward as the page scrolls (rebuild.js writes
   --hero-scroll), so the lower thumbnails come into view on the way down.
   The inherited slider that did this from hosted JS is hidden. */
.s.is-home-hero .hero-home__slider-w { display: none !important; }
.s.is-home-hero { min-height: 0; overflow: hidden; }
.s.is-home-hero .hero-home__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  height: auto;
  min-height: 46rem;
  padding-top: 8em;
  padding-bottom: 5em;
  padding-right: 20rem;
  align-items: center;
}
.s.is-home-hero .hero-home__content { min-height: 0; padding-bottom: 0 !important; }
.perle-hero-stack {
  position: absolute;
  top: 5.5em;
  right: var(--container-padding, 2.5em);
  width: 15rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transform: translate3d(0, calc(var(--hero-scroll, 0px) * -0.45), 0);
  will-change: transform;
}
.perle-hero-stack__item {
  margin: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 0.3rem;
  opacity: 0;
  translate: 0 2.5rem;
  transition:
    opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    translate 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--i, 0) * 0.12s);
}
.perle-hero-stack.is-in .perle-hero-stack__item { opacity: 1; translate: 0 0; }
.perle-hero-stack__img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.perle-hero-stack__item:hover .perle-hero-stack__img { transform: scale(1.04); }
@media screen and (max-width: 991px) {
  .s.is-home-hero .hero-home__layout { padding-right: 0; padding-top: 6em; min-height: 0; }
  .perle-hero-stack {
    position: static;
    width: 100%;
    flex-direction: row;
    gap: 0.75rem;
    margin-top: 2em;
    transform: none;
  }
  .perle-hero-stack__item { flex: 1; }
}
@media screen and (max-width: 767px) {
  .s.is-home-hero .hero-home__layout { padding-top: 5em; padding-bottom: 3em; }
}

/* Nav: Webflow's scroll-spy marks in-page links `is-current` once their
   section has scrolled past, and the inherited style painted those as a pale
   pill with off-white type, which read as blank boxes. Keep the label and mark
   the current section with a short ice rule instead. */
.nav__menu .nav__item .btn-w.is-current,
.nav-w[data-theme] .nav__item .btn-w.is-current {
  background-color: transparent;
  color: inherit;
}
.nav__menu .nav__item .btn-w.is-current .u-paragraph-xs {
  color: var(--color--off-white);
  box-shadow: inset 0 -2px 0 var(--perle-ice);
}

/* Founder section on small screens: the inherited `.grid-main` rules keep
   their twelve-column template and column placements below 992px, which
   left the copy in a zero-width track. Collapse to one column outright. */
@media screen and (max-width: 991px) {
  .ft-framework__layout.grid-main.is-perle-2col {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .ft-framework__layout.grid-main.is-perle-2col > * {
    grid-column: auto !important;
    grid-row: auto !important;
  }
}

/* Hero headline: the split-text masks are sized before the serif webfont
   swaps in, so the taller "make it move." line was clipped at the bottom
   once it wrapped onto its own line. The masks only matter for the reveal;
   let them show overflow afterwards. */
.s.is-home-hero .u-h1 .line-mask { overflow: visible !important; }

/* Founder: the inherited left column carries a 205px flex gap meant for the
   old layout. */
.ft-framework__layout.is-perle-2col .ft-framework__main { gap: 0; }



/* The inherited column placements were written for a twelve-column grid;
   on the two-column layout they spill into implicit tracks, which is what
   squeezed the wide shot. Place the three children explicitly. */
.ft-framework__layout.is-perle-2col .ft-framework__main { grid-column: 1; grid-row: 1; }
.ft-framework__layout.is-perle-2col .ft-framework__content { grid-column: 2; grid-row: 1; }

/* Studio image: a landscape still in the left column, directly under the
   "A director led studio by design" heading. Short, not a portrait. */
.perle-studio__img-w { margin: 2em 0 0; width: 100%; }
.perle-studio__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.perle-studio__img-w:hover .perle-studio__img { transform: scale(1.02); }
@media screen and (max-width: 991px) { .perle-studio__img-w { margin-top: 1.5em; } }

/* With the thumbnail column on the right, the headline column is narrower;
   size the line so "make it move." holds together on one line. */
.s.is-home-hero .u-h1 { font-size: clamp(2.75rem, 6.6vw, 6.25rem); }


/* ============================================================================
   23 Sep 2026 round — Google Doc "Perle Website" + 21 Sep call notes + Nema's
   image drop. Everything below is prefixed `pl-`.

   Palette rule from the call: lean black; pink carries one section (the
   "We're all in on creators." band); white carries one section ("What we
   do"); ice blue stays an accent, never a fill. "Separate by colour" between
   the other sections is done by alternating two blacks.
   ========================================================================== */
:root,
body {
  --pl-black: #0b0b0d;
  --pl-char: #17171b;
  --pl-white: #f4f4f2;
  --pl-pink: #ea3aa0;
  --pl-yellow: #f2d044;
  --pl-ink-72: rgba(242, 243, 245, 0.72);
}

.pl-bg-black { background-color: var(--pl-black); color: var(--color--off-white); }
.pl-bg-char  { background-color: var(--pl-char);  color: var(--color--off-white); }
.pl-bg-pink  { background-color: var(--pl-pink);  color: var(--pl-black); }
.pl-bg-white { background-color: var(--pl-white); color: var(--pl-black); }
/* The inherited sections paint their own .c; let the section colour show. */
.s.pl-bg-black .c, .s.pl-bg-char .c { background-color: transparent; }
.s.pl-bg-black#work { background-color: var(--pl-black); }

.pl-sec .c { padding-top: 8em; padding-bottom: 8em; }
@media screen and (max-width: 767px) {
  .pl-sec .c { padding-top: 4.5em; padding-bottom: 4.5em; }
}

.pl-pink { color: var(--pl-pink); }
.pl-yellow { color: var(--pl-yellow); }

.pl-kicker {
  margin: 0 0 2.5em;
  font-family: var(--perle-sans);
  font-size: clamp(0.8rem, 1vw, 0.95rem);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--perle-ice);
}
.pl-bg-white .pl-kicker { color: var(--pl-black); }

.pl-lead {
  margin: 0 0 0.8em;
  font-family: var(--perle-sans);
  font-size: clamp(1.35rem, 2.2vw, 2rem);
  line-height: 1.28;
  color: var(--color--off-white);
}
.pl-body {
  margin: 0 0 1em;
  font-family: var(--perle-sans);
  font-size: clamp(1.02rem, 1.25vw, 1.2rem);
  line-height: 1.6;
  color: var(--pl-ink-72);
}
.pl-body:last-child { margin-bottom: 0; }
.pl-bg-white .pl-body { color: rgba(11, 11, 13, 0.72); }

.pl-serif-h {
  margin: 0;
  font-family: var(--perle-serif);
  font-weight: 400;
  font-size: clamp(2.4rem, 4.6vw, 4.75rem);
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: var(--color--off-white);
}

/* ---- Full-bleed type ---------------------------------------------------------
   Each line is sized by rebuild.js so the longest line spans the container
   (data-pl-fit="<fraction>" narrows that), and every line shares that size.
   The clamp() below is the no-JS fallback. */
.pl-fit {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  text-align: center;
  font-family: var(--perle-sans);
  font-weight: 900;
  font-stretch: 75%;
  text-transform: uppercase;
  line-height: 0.88;
  letter-spacing: -0.015em;
  font-size: var(--pl-fs, clamp(2.5rem, 9vw, 12rem));
  color: var(--color--off-white);
}
.pl-fit__line { display: block; white-space: nowrap; }
.pl-fit--serif {
  font-family: var(--perle-serif);
  font-weight: 400;
  font-stretch: normal;
  text-transform: none;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--pl-black);
}

/* ---- Hero: clip strip, after Billion Dollar Boy -------------------------------
   Measured off billiondollarboy.com: a column of 9:16 tiles, a quarter of the
   viewport wide, flush to the right edge and running the full height of the
   hero, drifting upward at ~0.15 tile heights per second with no gaps. On
   phones it becomes a full-bleed row along the bottom of the hero, tiles about
   half the screen wide, drifting left. rebuild.js positions the tiles; this
   only lays out the frame. */
.s.is-home-hero .hero-home__layout {
  min-height: min(100svh, 62rem);
  padding-right: calc(clamp(14rem, 25vw, 30rem) + 3rem);
}
.pl-strip {
  position: absolute;
  top: 0;
  bottom: 0;
  right: calc(var(--container-padding, 2.5em) * -1);
  width: clamp(14rem, 25vw, 30rem);
  overflow: hidden;
  background: #141417;
}
.pl-strip__tile {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 9 / 16;
  margin: 0;
  will-change: transform;
  backface-visibility: hidden;
}
.pl-strip__media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
@media screen and (max-width: 991px) {
  .s.is-home-hero .hero-home__layout { padding-right: 0; min-height: 0; }
  .pl-strip {
    position: relative;
    top: auto;
    bottom: auto;
    right: auto;
    width: auto;
    margin: 2.5em calc(var(--container-padding, 1rem) * -1) 0;
    height: calc(clamp(10rem, 49vw, 22rem) * 16 / 9);
  }
  .pl-strip__tile { width: clamp(10rem, 49vw, 22rem); }
}

/* Nav: see-through over the top of the hero so the strip runs up under it,
   as on the reference; it goes solid once the page scrolls (the same point
   the wordmark turns into the mark). */
.nav-w, .nav-w[data-theme] { transition: background-color 0.35s ease; }
.nav-w:not(.is-logo-mark), .nav-w[data-theme]:not(.is-logo-mark) { background-color: transparent; }

/* ---- Attention is the job ---------------------------------------------------- */
.pl-attention .pl-fit { color: var(--color--off-white); }
.pl-attention__copy {
  max-width: 46rem;
  margin: 3.5em auto 0;
  text-align: center;
}
.pl-attention__copy .pl-lead { color: var(--pl-pink); }

/* ---- Celebrity tiles: real photos now, so the label bar goes dark ------------- */
#work .ft-cases__img { object-fit: cover; }
#work .ft-cases__content { background-color: var(--pl-black); color: var(--color--off-white); }

/* ---- People who built the audience -------------------------------------------- */
.pl-people .c { padding-top: 9em; padding-bottom: 9em; }

/* ---- We're all in on creators (the pink band) ----------------------------------- */
.pl-creators-banner .c { padding-top: 5.5em; padding-bottom: 5.5em; }

/* ---- Creator carousel ------------------------------------------------------------
   An endless strip across the full width, driven by rebuild.js rather than a
   CSS animation: changing a running animation's duration on hover made the
   strip jump, so the script eases the speed down to a stop under the pointer
   and back up when it leaves. It can also be dragged, swiped, or scrolled
   sideways on a trackpad. The list is duplicated in the markup so the
   position wraps without a seam. */
.pl-creators { padding: 5em 0 0; }
.pl-creators .c { padding-top: 1.75em; padding-bottom: 5em; }
.pl-carousel {
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;          /* vertical swipes still scroll the page */
  user-select: none;
  -webkit-user-select: none;
}
.pl-carousel.is-dragging { cursor: grabbing; }
.pl-carousel__track {
  display: flex;
  width: max-content;
  will-change: transform;
  backface-visibility: hidden;
}
.pl-carousel__list { display: flex; flex: none; gap: 1rem; padding-right: 1rem; }
.pl-carousel__item {
  flex: none;
  width: clamp(13rem, 21vw, 22rem);
  aspect-ratio: 4 / 5;
  margin: 0;
  overflow: hidden;
  border-radius: 0.3rem;
  background: #1d1d22;
  transform: translateZ(0);     /* own layer: hover zoom doesn't repaint the strip */
}
.pl-carousel__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;         /* no native image drag ghost */
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (hover: hover) {
  .pl-carousel:not(.is-dragging) .pl-carousel__item:hover .pl-carousel__img { transform: scale(1.04); }
}
.pl-caption {
  margin: 0;
  font-family: var(--perle-serif);
  font-style: italic;
  font-size: clamp(1.05rem, 1.3vw, 1.3rem);
  color: rgba(242, 243, 245, 0.6);
}

/* ---- Two-column statement blocks ------------------------------------------------- */
.pl-2col {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: 3em 6em;
  align-items: start;
}
.pl-2col__copy { max-width: 36rem; padding-top: 0.6em; }
@media screen and (max-width: 991px) {
  .pl-2col { grid-template-columns: minmax(0, 1fr); gap: 2em; }
}

/* ---- Not chasing culture ------------------------------------------------------------ */
.pl-culture .pl-fit { color: var(--color--off-white); }
.pl-culture__tag {
  margin: 1.6em 0 0;
  text-align: center;
  font-family: var(--perle-serif);
  font-style: italic;
  font-size: clamp(1.6rem, 3vw, 3rem);
  color: var(--perle-ice);
}

/* ---- What we do: the barrel, four services -------------------------------------------
   Each service's write-up from the doc sits in the right-hand column and
   swaps as the barrel turns. All four share one grid cell, so the column is
   always as tall as the longest write-up and the section never changes
   height mid-spin (the barrel owns the wheel while the pointer is over it,
   so a jump would slide content out from under the cursor). */
#solutions .ft-solutions__description .w-dyn-items { display: grid; height: 100%; }
#solutions .ft-solutions__content { align-self: stretch; justify-content: center; }
#solutions .ft-solutions__desc-item[data-cap-index] {
  display: block;
  position: relative;   /* inherited as absolute, which let long copy spill out */
  grid-area: 1 / 1;
  align-self: center;   /* shorter write-ups sit level with the barrel, not at the top */
  visibility: hidden;
  opacity: 0;
  translate: 0 0.6rem;
  transition: opacity 0.45s ease, translate 0.45s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.45s;
}
#solutions .ft-solutions__desc-item[data-cap-index].is-cap-active {
  visibility: visible;
  opacity: 1;
  translate: 0 0;
  transition: opacity 0.45s ease, translate 0.45s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s;
}
#solutions .ft-solutions__desc-item .u-h4.is-paragraph { margin-bottom: 0.9em; }
.pl-wwd__body {
  margin: 0 0 0.9em;
  font-family: var(--perle-sans);
  font-size: clamp(0.98rem, 1.1vw, 1.1rem);
  line-height: 1.6;
  color: rgba(11, 11, 13, 0.72);
}
.pl-wwd__body:last-child { margin-bottom: 0; }

/* ---- House in the Hamptons (intro to the Clubhouse card) --------------------------- */
.pl-hamptons .c { text-align: center; padding-bottom: 6em; }
.pl-hamptons__h { max-width: 22ch; margin: 0 auto; }
.pl-hamptons__p { max-width: 36rem; margin: 1.6em auto 0; }

/* Clubhouse card: the "Equal parts" line is gone, so the tagline takes a
   little more presence. */
.perle-clubhouse__tag { max-width: 40ch; font-size: clamp(1.05rem, 1.5vw, 1.4rem); }

/* ---- Founder ------------------------------------------------------------------------ */
.s.pl-bg-char#founder .ft-framework__layout { background: transparent; }
.pl-founder__quote {
  margin: 1.4em 0 0;
  font-family: var(--perle-serif);
  font-style: italic;
  font-size: clamp(1.6rem, 2.6vw, 2.6rem);
  line-height: 1.12;
  color: var(--pl-pink);
}
#founder em { font-style: italic; color: var(--color--off-white); }

/* ---- Anyone can start a brand ----------------------------------------------------- */
.pl-matter .c { padding-top: 10em; padding-bottom: 10em; }
@media screen and (max-width: 767px) { .pl-matter .c { padding-top: 5.5em; padding-bottom: 5.5em; } }

/* ---- Two ways to work with us ------------------------------------------------------- */
.pl-ways__he { text-align: center; margin-bottom: 4em; }
.pl-ways__he .pl-kicker { margin-bottom: 1.2em; }
.pl-ways__title {
  margin: 0;
  font-family: var(--perle-sans);
  font-weight: 900;
  font-stretch: 75%;
  font-size: clamp(2.4rem, 5.5vw, 6rem);
  line-height: 0.9;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--color--off-white);
}
.pl-ways__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}
.pl-way {
  display: flex;
  flex-direction: column;
  padding: 2.6em 2.4em 2.4em;
  border: 1px solid rgba(242, 243, 245, 0.18);
  border-top: 3px solid var(--pl-pink);
  background-color: var(--pl-char);
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}
.pl-way.is-club { border-top-color: var(--pl-yellow); }
.pl-way__kicker {
  margin: 0 0 1.2em;
  font-family: var(--perle-sans);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pl-pink);
}
.pl-way.is-club .pl-way__kicker { color: var(--pl-yellow); }
.pl-way__name {
  margin: 0 0 0.6em;
  font-family: var(--perle-serif);
  font-weight: 400;
  font-size: clamp(2.2rem, 3.6vw, 3.6rem);
  line-height: 1;
  color: var(--color--off-white);
}
.pl-way .pl-body { flex: 1; max-width: 34rem; }
.pl-way__btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.8em;
  margin-top: 2em;
  padding: 1em 1.6em;
  border: 1px solid currentColor;
  font-family: var(--perle-sans);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--pl-pink);
  transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}
.pl-way.is-club .pl-way__btn { color: var(--pl-yellow); }
.pl-way__key { width: 1.2em; height: 1.2em; transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
.pl-way.is-studio .pl-way__btn:hover { background-color: var(--pl-pink); border-color: var(--pl-pink); color: var(--pl-black); }
.pl-way.is-club .pl-way__btn:hover { background-color: var(--pl-yellow); border-color: var(--pl-yellow); color: var(--pl-black); }
.pl-way__btn:hover .pl-arrow { transform: translateX(0.35em); }
.pl-way__btn:hover .pl-way__key { transform: rotate(90deg); }
.pl-way.is-club:hover { box-shadow: 0 0 3rem rgba(242, 208, 68, 0.08); }
.pl-way.is-studio:hover { box-shadow: 0 0 3rem rgba(234, 58, 160, 0.08); }
@media screen and (max-width: 767px) {
  .pl-ways__grid { grid-template-columns: minmax(0, 1fr); }
  .pl-way { padding: 2em 1.5em; }
}

/* ---- Let's talk: flat charcoal now (the background placeholder is dropped) ---------- */
#contact.pl-bg-char .c { padding-top: 8em; padding-bottom: 8em; }
#contact.pl-bg-char .u-h2,
#contact.pl-bg-char .u-paragraph-l { color: var(--color--off-white); }
#contact.pl-bg-char .perle-cta__contact { color: var(--pl-ink-72); }

/* ---- Footer --------------------------------------------------------------------------- */
.pl-footer { background-color: var(--pl-black); color: var(--color--off-white); }
.pl-footer .c { padding-top: 5em; padding-bottom: 2.5em; }
.pl-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 3em;
  padding-bottom: 4em;
  border-bottom: 1px solid rgba(242, 243, 245, 0.14);
}
.pl-footer__logo { display: inline-flex; align-items: baseline; gap: 0.6rem; color: inherit; text-decoration: none; }
.pl-footer__word {
  font-family: var(--perle-sans);
  font-stretch: 125%;
  font-weight: 900;
  font-size: 2.5rem;
  letter-spacing: -0.01em;
  line-height: 1;
}
.pl-footer__dot { width: 14px; height: 14px; border-radius: 50%; background: var(--pl-pink); flex: none; }
.pl-footer__tag { max-width: 24rem; margin: 1.4em 0 0; color: var(--pl-ink-72); line-height: 1.5; }
.pl-footer__h {
  margin: 0 0 1em;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--perle-ice);
}
.pl-footer__col p { margin: 0; line-height: 1.6; }
.pl-footer__col a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(242, 243, 245, 0.35); }
.pl-footer__col a:hover { color: var(--pl-pink); border-color: currentColor; }
.pl-footer__copy { margin: 2em 0 0; font-size: 0.85rem; color: rgba(242, 243, 245, 0.5); }
@media screen and (max-width: 767px) {
  .pl-footer__grid { grid-template-columns: minmax(0, 1fr); gap: 2.2em; }
}

/* ---- Scroll reveals for the new blocks (class set by rebuild.js) -------------------- */
.pl-rv {
  opacity: 0;
  translate: 0 2rem;
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), translate 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    background-color 0.35s ease, color 0.35s ease;
  transition-delay: calc(var(--d, 0) * 0.08s);
}
.pl-rv.is-in { opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce) {
  .pl-rv { opacity: 1; translate: 0 0; transition: none; }
  #solutions .ft-solutions__desc-item[data-cap-index] { transition: none; translate: 0 0; }
}

/* ---- 23 Sep fixes after first capture ------------------------------------------------ */
/* The site-wide `span { font-family: sans }` rule was pulling accent spans out
   of their serif headings. */
.pl-serif-h span,
.pl-fit--serif .pl-fit__line,
.pl-fit--serif span { font-family: var(--perle-serif); }

/* Hero: the reel column is wider than the old thumbnails, so size the line to
   keep "make it move." together. */
.s.is-home-hero .u-h1 { font-size: clamp(2.75rem, 5.7vw, 6rem); }

/* Let's talk: heading with the invitation directly under it, instead of the
   inherited offset grid that left a screen of empty charcoal. */
#contact .cta__layout.grid-main {
  padding-top: 0;
  padding-bottom: 0;
  grid-row-gap: 2.5em;
}
#contact .cta__subtext {
  grid-area: 2 / 1 / auto / span 7;
  max-width: 40rem;
}
#contact .cta__subtext .u-paragraph-l {
  font-size: clamp(1.3rem, 2vw, 1.85rem);
  line-height: 1.3;
}
#contact .perle-cta__contact { font-size: clamp(1rem, 1.2vw, 1.15rem); }
@media screen and (max-width: 991px) {
  #contact .cta__subtext { grid-area: auto; }
}

/* Arrow icon used by the "Two ways" buttons. */
.pl-arrow { width: 1.1em; height: 1em; flex: none; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); }


/* ---- Line breaks follow the doc (23 Sep, second pass) ---------------------------------
   Every headline keeps the Google Doc's own lines: one line in the doc is one
   line on the page. rebuild.js sizes each so its longest line fits. */
.s.is-home-hero .u-h1 { white-space: nowrap; }
.s.is-home-hero .hero-home__content { width: 100%; }

.pl-fit--left { align-items: flex-start; text-align: left; }
/* On phones a long single-line heading wraps rather than shrinking below a
   readable size (data-pl-min). */
.pl-fit.is-wrapped .pl-fit__line { white-space: normal; }

/* Heading on one line, then the doc's paragraphs underneath. */
.pl-stack__copy { max-width: 46rem; margin-top: 2.2em; }
.pl-stack .pl-body { color: var(--pl-ink-72); font-size: clamp(1.1rem, 1.5vw, 1.4rem); }
.pl-hamptons__h { max-width: none; }

/* "A DIRECTOR LED STUDIO BY DESIGN": its own full-width line above the
   founder columns, in caps as the doc has it. */
.pl-founder__h { margin: 0 0 1.2em; color: var(--pl-pink); }
#founder .ft-framework__layout.is-perle-2col { padding-top: 0; }
#founder .c { padding-top: 7em; }
/* The "noisy" line closes its paragraph, as in the doc, with a colour lift. */
.pl-founder__quote { display: inline; margin: 0; font-size: inherit; line-height: inherit;
  font-family: inherit; font-style: normal; color: var(--pl-pink); }

/* Two ways: the title is a fitted single line now. */
.pl-ways__title { font-size: var(--pl-fs, clamp(2.4rem, 5.5vw, 6rem)); }

/* Let's talk: three separate lines, as in the doc. */
#contact .cta__subtext .u-paragraph-l { margin: 0 0 0.35em; }
#contact .perle-cta__contact { margin-top: 1.2em; }

/* Footer: the doc's order — Office Address, address, email, tagline. */
.pl-footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.pl-footer__info p { margin: 0; line-height: 1.6; }
.pl-footer__info .pl-footer__gap { margin-top: 1.1em; }
.pl-footer__info .pl-footer__tag { max-width: 26rem; }
/* Serif one-liners on the dark sections take off-white; the dark serif is
   only for the pink "We're all in on creators." band. */
.pl-bg-black .pl-fit--serif,
.pl-bg-char .pl-fit--serif { color: var(--color--off-white); }

/* Let's talk: each of the doc's lines on one line at desktop width. */
#contact .cta__subtext { grid-area: 2 / 1 / auto / -1; max-width: none; }
@media screen and (min-width: 992px) {
  #contact .cta__subtext p { white-space: nowrap; }
}
@media screen and (max-width: 767px) {
  .pl-footer__grid { grid-template-columns: minmax(0, 1fr); }
}

/* Phones: as on the reference, the hero fills the screen with the headline at
   the top and the clip row sitting flush along the bottom edge. */
@media screen and (max-width: 991px) {
  .s.is-home-hero .hero-home__layout {
    display: flex;
    flex-direction: column;
    min-height: 100svh;
    padding-bottom: 0;
  }
  .s.is-home-hero .hero-home__content { padding-bottom: 2em !important; }
  .pl-strip { margin-top: auto; align-self: stretch; }
}

/* ---- One black (23 Sep) -----------------------------------------------------------
   Client: every black on the page is the same black, #0B0B0D. The second
   charcoal the alternating sections used, the Clubhouse block's deeper black,
   and the tile backings all collapse to it. Sections still separate where the
   doc asks through the pink band and the white "What we do" section. */
:root,
body {
  --pl-char: #0b0b0d;
  --clubhouse-black: #0b0b0d;
}
.pl-bg-char { background-color: #0b0b0d; }
.pl-strip,
.pl-carousel__item { background-color: #0b0b0d; }
.pl-way { background-color: transparent; }

/* What we do: each write-up's headline is one line in the doc, so it stays on
   one line at desktop widths. The description column loses the inherited
   45ch cap so the longest headline fits; the body copy under it keeps a
   readable measure. */
@media screen and (min-width: 992px) {
  #solutions .ft-solutions__content { max-width: none; }
  #solutions .ft-solutions__desc-item .u-h4.is-paragraph {
    white-space: nowrap;
    font-size: clamp(1rem, 1.45vw, 1.6rem);
  }
  #solutions .pl-wwd__body { max-width: 36rem; }
}

/* ---- 24 Sep feedback round ------------------------------------------------------------ */
.pl-ice { color: var(--perle-ice); }
.pl-line { display: block; }

/* "And we're helping them launch…": its first line is an ice-blue lead,
   the way "Attention is the job" has its pink one. Left-aligned on desktop;
   centred on phones/tablets only (the section is .pl-stack, so the
   under-992px block below centres it with the rest). */
.pl-brands .pl-lead.pl-ice { color: var(--perle-ice); }

/* Larger: the caption under the creators and "first impressions". */
.pl-caption { font-size: clamp(1.4rem, 2.6vw, 2.6rem); line-height: 1.2; }
.pl-culture__tag { font-size: clamp(2rem, 4.4vw, 4.6rem); line-height: 1.1; }

/* ---- Phones and tablets: text centred in every section ---------------------------------- */
@media screen and (max-width: 991px) {
  .s.is-home-hero .hero-home__content { align-items: center; text-align: center; }
  .s.is-home-hero .u-h1 { text-align: center; }
  .s.is-home-hero .hero-home__content .line-mask,
  .s.is-home-hero .hero-home__content .line { text-align: center !important; }

  .pl-fit--left { align-items: center; text-align: center; }
  .pl-stack .c, .pl-caption { text-align: center; }
  .pl-stack__copy { margin-left: auto; margin-right: auto; }

  #solutions .ft-solutions__sub { display: flex; justify-content: center; }
  #solutions .ft-solutions__li, #solutions .ft-solutions__li .u-h1 { text-align: center; }
  #solutions .ft-solutions__content { text-align: center; align-items: center; margin-left: auto; margin-right: auto; }
  #solutions [data-css="text-indent"]::before { display: none; }
  #solutions .pl-wwd__body { margin-left: auto; margin-right: auto; }

  .pl-founder__h { text-align: center; }
  #founder .ft-framework__content { text-align: center; align-items: center; }
  #founder .perle-studio__img-w { margin-left: auto; margin-right: auto; }

  .pl-way { align-items: center; text-align: center; }
  .pl-way__btn { align-self: center; }

  #contact .cta__layout.grid-main { align-items: center; text-align: center; }
  #contact .cta__main { justify-content: center; }
  #contact .cta__subtext { margin-left: auto; margin-right: auto; }

  .pl-footer__grid { justify-items: center; text-align: center; }
  .pl-footer__copy { text-align: center; }
}
/* Hamptons intro: its two sentences, one line each on desktop. */
.pl-hamptons__p { max-width: 62rem; }
/* Phones/tablets: the WHAT WE DO kicker is sized to fit and its rule hugs
   the word, centred (an inherited mobile rule blew it up to 2em, wider than
   its 60%-wide ruled box). The footer stacks into one centred column. */
@media screen and (max-width: 991px) {
  #solutions .ft-solutions__sub { display: block; width: fit-content; margin-left: auto; margin-right: auto; }
  #solutions .ft-solutions__sub .u-h4 { font-size: clamp(1rem, 3.6vw, 1.6rem); }
  .pl-footer__grid { grid-template-columns: minmax(0, 1fr); gap: 2.2em; }
}

/* ---- 25 Sep feedback round ------------------------------------------------------------- */
/* "And experiential takeovers are the new way to earn it." never wraps: its
   block is wider, and on phones the line scales down to fit the screen. */
.pl-attention__copy { max-width: 72rem; }
.pl-attention__copy .pl-lead { white-space: nowrap; font-size: min(clamp(1.35rem, 2.2vw, 2rem), 3.8vw); }

/* Two ways to work with us: the Clubhouse card is ice blue, not yellow. */
.pl-way.is-club { border-top-color: var(--perle-ice); }
.pl-way.is-club .pl-way__kicker,
.pl-way.is-club .pl-way__btn { color: var(--perle-ice); }
.pl-way.is-club .pl-way__btn:hover { background-color: var(--perle-ice); border-color: var(--perle-ice); color: var(--pl-black); }
.pl-way.is-club:hover { box-shadow: 0 0 3rem rgba(111, 208, 240, 0.1); }

/* "And we're helping them launch…": centred at every size now (the client
   reversed the 24 Sep mobile-only call). The blue lead holds one line on
   desktop; the two body paragraphs sit in a centred column. */
.pl-brands .c { text-align: center; }
.pl-brands .pl-stack__copy { margin-left: auto; margin-right: auto; }
@media screen and (min-width: 992px) {
  .pl-brands .pl-stack__copy { max-width: none; }
  .pl-brands .pl-lead.pl-ice { white-space: nowrap; font-size: clamp(1.1rem, 1.85vw, 1.9rem); }
  .pl-brands .pl-body { max-width: 46rem; margin-left: auto; margin-right: auto; }
}

/* ---- 27 Sep: mobile finishing pass (phones, up to 767px) -------------------------------- */
@media screen and (max-width: 767px) {
  /* Hero: fills the first screen with the clips along the bottom (27 Sep,
     client: "moved down"); the headline is centred in the space above them
     rather than stuck to the top, so there's no hole under it. The pinned
     110svh scroll track goes. */
  .hero-track { height: auto; }

  /* One rhythm: the few sections that ran on 2x the usual phone padding. */
  .pl-people .c { padding-top: 4.5em; padding-bottom: 4.5em; }
  #contact.pl-bg-char .c { padding-top: 4.5em; padding-bottom: 4.5em; }
  #founder .c { padding-top: 4.5em; }
  .pl-footer .c { padding-top: 3.5em; }

  /* Coloured endings stay in one piece: "billion dollar brands.",
     "the Hamptons.", "New York City." */
  .pl-fit--serif .pl-pink,
  .pl-fit--serif .pl-yellow { white-space: nowrap; }

  /* What we do: the lead line was 13px; body copy a touch larger. */
  #solutions [data-css="text-indent"].u-h4 { font-size: 1.35rem; line-height: 1.25; margin-bottom: 0.9em; }
  #solutions .pl-wwd__body { font-size: 0.95rem; line-height: 1.6; }
  /* The write-ups share one box sized to the longest (so the page doesn't
     jump as the list turns); on phones each sits at the top of it, a fixed
     step under the list, instead of floating in the middle. */
  #solutions .ft-solutions__desc-item[data-cap-index] { align-self: start; }

  /* Founder: 13.5px body copy up to a readable size. */
  #founder .is-perle-lead { font-size: 1.2rem; line-height: 1.35; }
  #founder .is-perle-body { font-size: 0.95rem; line-height: 1.6; }

  /* "Let's talk" and its arrow read as one unit. */
  #contact .cta__main { gap: 0.5rem; justify-content: center; }
  #contact .cta__main-btn .btn-inner { padding-left: 0.4rem; }

  /* Footer wordmark: the dot sits with the word, as in the nav. */
  .pl-footer__logo { gap: 0.2rem; }
}

@media screen and (max-width: 767px) {
  .s.is-home-hero .hero-home__content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 0;
    padding-bottom: 1.5rem !important;
  }
}
/* Hero clips never show the browser's play button: if a phone refuses
   autoplay (iOS Low Power Mode), the poster stands in until the first tap. */
.pl-strip video::-webkit-media-controls,
.pl-strip video::-webkit-media-controls-start-playback-button,
.pl-strip video::-webkit-media-controls-overlay-play-button { display: none !important; -webkit-appearance: none; }

/* Founder portrait (27 Sep): a cut-out. No fade (client: it looked wrong);
   the photo's straight bottom edge stands on a fine rule instead, so the
   crop reads as intentional. Desktop: centred in its column, top level with
   the text, which centres against it; the heading's 162px gap is cut back. */
.pl-founder__h { margin-bottom: max(2rem, 0.4em); }
#founder .perle-studio__img-w.is-portrait {   /* no rule under it: it read as a stray line */
  max-width: 30rem;
  margin: 0 auto;
}
#founder .is-portrait .perle-studio__img { aspect-ratio: auto; object-fit: contain; }
#founder .is-portrait:hover .perle-studio__img { transform: none; }
@media screen and (min-width: 992px) {
  #founder .ft-framework__layout.is-perle-2col { align-items: center; }
  /* Bigger on desktop (27 Sep): fills the column, a step in from the text. */
  #founder .perle-studio__img-w.is-portrait { max-width: 38rem; margin-right: 1.5rem; }
}
@media screen and (max-width: 991px) {
  #founder .perle-studio__img-w.is-portrait { max-width: 22rem; margin-top: 0.5rem; }
}

/* Founder video (27 Sep, mockup D): a 5:4 loop on its own grey backdrop,
   sized and placed like the portrait; no browser play button, ever. */
#founder .is-video .perle-studio__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  background: #d9d9d9;
}
#founder .is-video video::-webkit-media-controls,
#founder .is-video video::-webkit-media-controls-start-playback-button,
#founder .is-video video::-webkit-media-controls-overlay-play-button { display: none !important; -webkit-appearance: none; }

/* ---- Celebrity cards (27 Sep, Nema) -------------------------------------------------------
   Uncropped 9:16 photos that start where the vertical name band ends (the
   band is 3.25em of its own font wide on desktop, 3em on phones, where its
   font is 0.75em), and a centred line of context underneath in place of the
   name. */
.ft-cases__visual { aspect-ratio: auto; }
.ft-cases__visual .ft-cases__img {
  position: relative;
  display: block;
  margin-left: 3.25em;
  width: calc(100% - 3.25em);
  height: auto;
  aspect-ratio: 9 / 16;
  object-fit: cover;
}
.ft-cases__content { align-items: center; text-align: center; }
.pl-case__desc { text-wrap: balance; max-width: 22em; line-height: 1.25; }
@media screen and (max-width: 767px) {
  .ft-cases__content { height: auto; }
  .ft-cases__content .pl-case__desc { font-size: 0.95rem; }
}
@media screen and (max-width: 479px) {
  /* Small phones: the band's font is 0.75em and its offset 3em, so 2.25em. */
  .ft-cases__visual .ft-cases__img { margin-left: 2.25em; width: calc(100% - 2.25em); }
}
/* Captions of different lengths: each caption box runs to the bottom of its
   card, so a one-line caption never leaves the band showing beneath it. */
.ft-cases__li-card { display: flex; flex-direction: column; }
.ft-cases__li-card .ft-cases__content { flex: 1 1 auto; justify-content: center; }
/* Captions: exactly two lines each (27 Sep); each line holds together. */
.pl-case__desc .pl-line { display: block; white-space: nowrap; }
.pl-case__desc { max-width: none; }

/* Celebrity cards, round 2 (27 Sep):
   - the vertical names go heavy and condensed, like the page's headlines;
   - captions centre on the photo (not the whole card, which includes the
     band), and a long line spreads evenly both ways;
   - the second line takes the card's band colour (pink / ice, alternating). */
.ft-cases__banner-item p { font-weight: 850; font-stretch: 78%; letter-spacing: 0.005em; }
.ft-cases__li-card .ft-cases__content { padding-left: 3.25em; padding-right: 0; align-items: center; }
.pl-case__desc { width: max-content; }
.ft-cases__li:nth-child(odd) .pl-case__desc .pl-line + .pl-line { color: var(--pl-pink); }
.ft-cases__li:nth-child(even) .pl-case__desc .pl-line + .pl-line { color: var(--perle-ice); }
@media screen and (max-width: 767px) {
  .ft-cases__content .pl-case__desc { font-size: min(0.95rem, 3.45vw); }
}
@media screen and (max-width: 479px) {
  .ft-cases__li-card .ft-cases__content { padding-left: 2.25em; }
}

/* Celebrity name bands (27 Sep). */
/* (27 Sep, later) Client prefers them static: one name per band, centred
   and tracked out to run the photo's full height; rebuild.js fits it. */
.ft-cases__banner-list,
[data-css='marquee-w']:hover [data-css='marquee-hover'] { animation: none !important; transform: none !important; }
.ft-cases__banner.is-static { justify-content: center; box-sizing: border-box; }
.ft-cases__banner.is-static .ft-cases__banner-list + .ft-cases__banner-list,
.ft-cases__banner.is-static .ft-cases__banner-item + .ft-cases__banner-item { display: none; }
.ft-cases__banner.is-static .ft-cases__banner-item { margin-right: 0; }
.ft-cases__banner.is-static p { white-space: nowrap; font-weight: 900; }

/* No single orphaned word on a paragraph's last line (e.g. the Hamptons
   intro on phones). */
p, .pl-line { text-wrap: pretty; }
.pl-hamptons__p .pl-line { text-wrap: balance; }

/* 27 Sep: "three-day" holds together; the Hamptons intro's two sentences
   get a clear gap between them. */
.pl-nowrap { white-space: nowrap; }
.pl-hamptons__p .pl-line + .pl-line { margin-top: 0.85em; }

/* ---- Phones: one type scale down the whole page (27 Sep) ---------------------------------
   Body copy had drifted between 15.2 and 19.2px from section to section.
   Everything that reads as body is now 16px / 1.6; the sans lead lines
   are 19.2px / 1.35. (Two lines stay smaller on purpose: "…earn it." and
   the card captions, which are sized to hold one line.) */
@media screen and (max-width: 767px) {
  .pl-body,
  .pl-hamptons__p,
  #solutions .pl-wwd__body,
  #founder .is-perle-body,
  .perle-clubhouse__tag,
  #contact .u-paragraph,
  .pl-footer__info p,
  .pl-footer__tag { font-size: 1rem !important; line-height: 1.6 !important; }
  .pl-footer__info p.pl-footer__h { font-size: 0.8rem !important; line-height: 1.5 !important; }

  .pl-brands .pl-lead.pl-ice,
  #founder .is-perle-lead,
  #contact .u-paragraph-l { font-size: 1.2rem !important; line-height: 1.35 !important; }

  /* The serif accent lines match each other too. */
  #solutions [data-css="text-indent"].u-h4,
  .pl-caption { font-size: 1.4rem !important; line-height: 1.25 !important; }
}