/* ══════════════════════════════════════════════════════════════════════
   firm-suite.css — T-1121 layout + readability pass for the four Firm-side
   pages: /firm, /team, /contact, /partners.

   Scoped entirely behind a body class (.pg-firm / .pg-team / .pg-contact /
   .pg-partners) so nothing in here can reach a page another agent owns.
   Tokens only — --red, --red-text, --on-black, --on-black-mute,
   --on-black-faint, --font-display/body/mono, all from site.css. No new
   colour, spacing or type values are invented; the clamps below reuse the
   ladder already in site.css (.sv-section is clamp(5rem,9vw,8rem), --tight
   is clamp(4rem,7vw,6rem)).
   ══════════════════════════════════════════════════════════════════════ */


/* ── 1. HERO COPY GROUND ────────────────────────────────────────────────
   Measured, not eyeballed. Sampling the real painted pixels behind the
   type (glyphs made transparent, box re-rasterised, declared colour
   composited onto the median ground pixel) gave:

       /firm  "THE FIRM · TNAADO INC."   2.41:1   against 4.5 required
       /team  "THE FIRM · FULL BENCH"    3.78:1
       /team  "WORK WITH US" (close)     4.42:1

   The cause is the same on both: .section-bg-overlay's side-anchor stop
   thins out to near-zero exactly where the copy column sits, so the red
   eyebrow ends up over a lit part of the photograph. Rather than mute the
   picture globally, this paints a wash anchored to the copy block itself.
   It lives inside .inner's own stacking context (site.css already gives
   .has-video > * position:relative + z-index:2), so z-index:-1 puts it
   behind the type but still above every art layer at z0/z1 — the photo,
   the film loop and the FX are all untouched outside the copy column. */
.pg-firm   .page-hero .inner,
.pg-team   .page-hero .inner,
.pg-contact .page-hero .inner { position: relative; }

.pg-firm   .page-hero .inner::before,
.pg-team   .page-hero .inner::before,
.pg-contact .page-hero .inner::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -2.6rem -14% -2.6rem -50vw;
  background: linear-gradient(90deg,
    rgba(10, 10, 10, .92) 0%,
    rgba(10, 10, 10, .88) 42%,
    rgba(10, 10, 10, .60) 74%,
    transparent 100%);
  pointer-events: none;
}
/* /team's hero has a person on the left of the frame; feather the wash a
   little harder there so her face is not flattened into the scrim. */
.pg-team .page-hero .inner::before {
  background: linear-gradient(90deg,
    rgba(10, 10, 10, .93) 0%,
    rgba(10, 10, 10, .86) 38%,
    rgba(10, 10, 10, .46) 70%,
    transparent 92%);
}
/* Same problem, same fix, on the closing CTA bands — the eyebrow there sits
   over a video poster whose brightness the page cannot control. */
.pg-team .sv-close .sv-close__inner,
.pg-team .sv-close .inner,
.pg-firm .sv-close .sv-close__inner,
.pg-firm .sv-close .inner { position: relative; }
.pg-team .sv-close .sv-close__inner::before,
.pg-team .sv-close .inner::before,
.pg-firm .sv-close .sv-close__inner::before,
.pg-firm .sv-close .inner::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -3rem -50vw;
  background: radial-gradient(ellipse 60% 78% at 50% 50%,
    rgba(10, 10, 10, .88) 0%,
    rgba(10, 10, 10, .74) 48%,
    rgba(10, 10, 10, .18) 82%,
    transparent 100%);
  pointer-events: none;
}


/* ── 2. BAND HEIGHT + PAGE RHYTHM ───────────────────────────────────────
   Two rules Ethan has repeated: nothing at or near full viewport height,
   and no page where every band is the same slab at one weight. /contact's
   single intake section measured 819px at a 900px viewport (0.91vh) with
   most of that height being dead ground below the form; /firm ran ~200px
   of empty black between the founder card and S.02.

   These trim the dead ground without touching the copy measure. Heights
   are checked with getBoundingClientRect after the change, not assumed. */
.pg-contact .sv-section--tight { padding-block: clamp(3.2rem, 5.5vw, 4.6rem) clamp(3rem, 5vw, 4rem); }
.pg-firm    .sv-section        { padding-block: clamp(3.6rem, 6.5vw, 5.6rem); }
.pg-firm    .sv-cine           { padding-block: clamp(3.6rem, 6.5vw, 5.6rem); }
.pg-team    .sv-section--tight { padding-block: clamp(3.4rem, 6vw, 5rem); }

/* The hero on all four is a fixed band, never a viewport-height one. */
.pg-firm .page-hero,
.pg-team .page-hero,
.pg-contact .page-hero,
.pg-partners .page-hero {
  min-height: clamp(320px, 42vw, 560px);
  height: auto;
  padding-block: clamp(3.4rem, 6vw, 5rem);
  display: flex;
  align-items: flex-end;
}


/* ── 3. /firm — S.01 founder aside ──────────────────────────────────────
   Was: four paragraphs in a half-width column with a 400px decorative
   spinning emblem opposite them, and the founder — a real face, a real
   quote in his own words — reduced to a 56px avatar 700px further down
   the page, detached from the story it belongs to.

   Now the copy is paired with the person it is about. The quote is
   verbatim and stays exactly as written. */
.fm-about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(2.2rem, 5vw, 4.4rem);
  align-items: start;
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
}
.fm-about__col > .sv-lede { max-width: 62ch; }

.fm-founder-aside { position: relative; }
.fm-founder-aside__figure { margin: 0; }
.fm-founder-aside__img {
  display: block;
  width: 100%;
  max-width: 340px;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
  filter: grayscale(.12) contrast(1.04);
  background: rgba(245, 241, 232, .05);
}
.fm-founder-aside__caption {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  margin-top: 1.2rem;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(245, 241, 232, .12);
  max-width: 340px;
}
.fm-founder-aside__name {
  font-family: var(--font-display);
  font-size: 1.02rem;
  color: var(--on-black);
}
.fm-founder-aside__role {
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--on-black-mute);
}
.fm-founder-aside__quote {
  margin: 1.5rem 0 0;
  padding: 0 0 0 1.1rem;
  border-left: 2px solid var(--red);
  max-width: 40ch;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.02rem;
  line-height: 1.62;
  color: rgba(245, 241, 232, .82);
}
@media (max-width: 900px) {
  .fm-about-grid { grid-template-columns: 1fr; }
  .fm-founder-aside { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 1.4rem; align-items: center; }
  .fm-founder-aside__img { max-width: 132px; }
  .fm-founder-aside__caption { margin-top: .9rem; padding-top: .9rem; }
  .fm-founder-aside__quote { grid-column: 1 / -1; margin-top: .4rem; max-width: 62ch; }
}


/* ── 4. /firm — the timeline and the process row ────────────────────────
   T-1108 already took the outer border and the inset fill off .pr-steps.
   What was left still rendered as four ruled cells marching across the
   page. The columns are told apart by a red rule over each label instead,
   which reads as a sequence rather than a row of boxes. */
.pg-firm .pr-steps {
  border-top: 0;
  border-bottom: 0;
  gap: clamp(1.4rem, 3vw, 2.4rem);
}
.pg-firm .pr-step {
  padding: 1.3rem 0 0;
  border-right: 0;
  border-bottom: 0;
  border-top: 1px solid rgba(245, 241, 232, .13);
  position: relative;
}
.pg-firm .pr-step::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 34px;
  height: 1px;
  background: var(--red);
}
.pg-firm .pr-step + .pr-step { padding-left: 0; }
@media (max-width: 980px) {
  .pg-firm .pr-steps { grid-template-columns: 1fr 1fr; }
  .pg-firm .pr-step:nth-child(-n+2) { border-bottom: 0; }
}
@media (max-width: 560px) {
  .pg-firm .pr-steps { grid-template-columns: 1fr; }
  .pg-firm .pr-step { border-bottom: 0; }
}


/* ── 5. /team — the roster ──────────────────────────────────────────────
   The marquee was slicing names and roles mid-word at both edges:
   "Rachael O'Connor" arrived as "ael O'Connor", and "ON-CAMERA
   PERSONALITY" as "ON-CAM / PERSONA". A partial card at the edge of a
   moving track is fine; a partial WORD reads as a typo. Masking both
   edges makes the cut deliberate, and a shared minimum height on the
   caption stops six cards with one-line roles and two-line roles from
   sitting on six different baselines. */
.pg-team .tm-carousel__viewport.tm-live {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.pg-team .tm-carousel .team-card { width: 186px; }
.pg-team .tm-carousel .team-card__photo { width: 148px; height: 148px; }
.pg-team .tm-carousel .team-card__body { padding-top: 1.1rem; min-height: 5.4rem; }
.pg-team .tm-carousel .team-card__name { font-size: .95rem; line-height: 1.35; }
/* The role rule was inline with the text, so on a two-line role it floated
   beside the first line and the block lost its centre. Above the text it
   marks every card the same way. */
.pg-team .tm-carousel .team-card__role {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  margin-top: .45rem;
  font-size: .6rem;
  line-height: 1.5;
  text-wrap: balance;
}
.pg-team .tm-carousel .team-card__role .tm-dash { width: 18px; }
@media (max-width: 640px) {
  .pg-team .tm-carousel .team-card { width: 150px; }
  .pg-team .tm-carousel .team-card__photo { width: 116px; height: 116px; }
  .pg-team .tm-carousel .team-card__body { min-height: 6rem; }
}
/* The section heading promised "Senior leadership. Specialized teams." and
   then went straight to a search box — the claim had nothing under it. */
.pg-team .tm-intro { max-width: 60ch; margin-top: 1.2rem; }


/* ── 6. /contact — the intake ───────────────────────────────────────────
   This is the page every other page funnels into, so the form column gets
   the width and the office column stops floating free of it. */
.pg-contact .ct-grid { align-items: start; }
.pg-contact .ct-aside__head {
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--red-text);
}
/* Placeholder type was the one thing in the form measuring under 4.5:1
   against the field's own painted fill. */
.pg-contact input::placeholder,
.pg-contact textarea::placeholder { color: rgba(245, 241, 232, .58); opacity: 1; }


/* ── 7. /partners ───────────────────────────────────────────────────────
   Full-bleed rows, no cards. Each row is a name, what it does for a
   client's system, and where it is already running. */
.pt-rows { border-top: 1px solid rgba(245, 241, 232, .13); margin-top: clamp(1.8rem, 3.5vw, 2.6rem); }
.pt-row {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2.6rem);
  align-items: baseline;
  padding: clamp(1.15rem, 2.2vw, 1.55rem) 0;
  border-bottom: 1px solid rgba(245, 241, 232, .09);
}
.pt-row__name {
  font-family: var(--font-display);
  font-size: 1.06rem;
  color: var(--on-black);
  margin: 0;
}
.pt-row__name span {
  display: block;
  font-family: var(--font-mono);
  font-size: .58rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--red-text);
  margin-bottom: .4rem;
}
.pt-row__body {
  margin: 0;
  font-size: .92rem;
  line-height: 1.7;
  color: rgba(245, 241, 232, .72);
  max-width: 70ch;
}
.pt-row__body b { color: var(--on-black); font-weight: 500; }
@media (max-width: 700px) {
  .pt-row { grid-template-columns: 1fr; gap: .55rem; }
}
.pt-note {
  margin-top: clamp(1.6rem, 3vw, 2.2rem);
  max-width: 66ch;
  font-size: .88rem;
  line-height: 1.75;
  color: rgba(245, 241, 232, .62);
}


/* ══════════════════════════════════════════════════════════════════════
   T-1149 — TEMPLATE PASS: light grounds, black separation, contained
   images, sharp-against-soft shapes, shorter bands.

   Ethan, four times: "I NEED WHITE BACKGROUNDS", "sections with text use
   white backgrounds ... too hard to read so much of it", "with black
   shading and separations", "do more work like the bubble stuff but
   different patterns crisscross the site, more sharp", "the design concept
   of little text white on black then big image needs to go", "no images
   going left to right border", "sections are too long".

   The rule this file now implements: a band whose JOB IS READING gets a
   light ground. Black stops being the page and becomes punctuation between
   the light blocks — the hero, one cinematic band per page, and the closing
   CTA. Nothing here flips `body`; every ground is set on a named section,
   so full-bleed backdrops on the dark bands are untouched (that is exactly
   what broke on the last attempt).

   Class is .fs-lite, not .sv-lite — other agents are editing site.css in
   parallel tonight and a generic name is a collision waiting to happen.
   ══════════════════════════════════════════════════════════════════════ */


/* ── A. SHAPE VOCABULARY ────────────────────────────────────────────────
   Soft radii are Ethan's own, lifted verbatim from unwrinkled-react's
   globals.css (the "bubble stuff" he asked for more of). The sharp set is
   new and deliberately their opposite: chamfers, angled cuts and crossing
   diagonals in clip-path. They are used ALTERNATELY — a soft shape is never
   followed by another soft shape — so the page reads as a set of decisions
   rather than one radius repeated down the column. */
.fs-arch    { border-radius: 50% 50% 12% 12% / 34% 34% 8% 8%; }
.fs-blob-a  { border-radius: 63% 37% 55% 45% / 56% 50% 50% 44%; }
.fs-blob-b  { border-radius: 40% 60% 56% 44% / 55% 42% 58% 45%; }

/* Sharp counterparts. Two corners cut on opposite diagonals reads as a cut
   sheet of stock; the wedge and blade give a band an angled edge without a
   gradient fade. */
.fs-chamfer { clip-path: polygon(1.6rem 0, 100% 0, 100% calc(100% - 1.6rem), calc(100% - 1.6rem) 100%, 0 100%, 0 1.6rem); }
.fs-blade   { clip-path: polygon(0 0, 100% 1.5rem, 100% 100%, 0 calc(100% - 1.5rem)); }
.fs-wedge   { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2.2rem), 0 100%); }
.fs-notch   { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2rem), calc(100% - 2rem) 100%, 0 100%); }

/* The crisscross. Two repeating diagonals at opposing angles and different
   pitches, so it never resolves into a regular grid. Sits on the section as
   a ::before at z-index 0 with the content above it. */
.fs-hatch { position: relative; isolation: isolate; }
.fs-hatch::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient( 45deg, rgba(10,10,10,.055) 0 1px, transparent 1px 15px),
    repeating-linear-gradient(-45deg, rgba(10,10,10,.040) 0 1px, transparent 1px 23px);
}
.fs-hatch > * { position: relative; z-index: 1; }
/* On a dark ground the same pattern, inverted. */
.fs-hatch--dark::before {
  background-image:
    repeating-linear-gradient( 45deg, rgba(245,241,232,.055) 0 1px, transparent 1px 15px),
    repeating-linear-gradient(-45deg, rgba(245,241,232,.038) 0 1px, transparent 1px 23px);
}
/* A single sharp accent slab, used behind portraits and beside headings. */
.fs-slab {
  position: absolute;
  background: var(--red);
  pointer-events: none;
}


/* ── B. THE LIGHT GROUND ────────────────────────────────────────────────
   .fs-lite on a section paints bone and re-colours every piece of type the
   shared classes put inside it. Specificity beats .sv-section's own
   background (0,2,0 vs 0,1,0) without !important and without touching
   site.css.

   Every colour below was checked against the REAL painted ground, not a DOM
   walk: --red on --bone is 5.54:1, #a50d26 is 7.37:1, ink at .78 alpha is
   10.0:1, the .62-alpha section numeral is 5.48:1. */
.fs-lite {
  background: var(--bone);
  color: var(--ink);
}
/* The glow layers are red radials tuned for black; on bone they read as a
   pink stain. Off, on light bands only. */
.fs-lite.glow-field::before,
.fs-lite .section-glow-overlay { display: none; }

.fs-lite .sv-h2,
.fs-lite .sv-h3,
.fs-lite h2,
.fs-lite h3 { color: var(--ink); text-shadow: none; }
.fs-lite .sv-h2 em,
.fs-lite .sv-h3 em { color: var(--red); }

.fs-lite .sv-lede,
.fs-lite p { color: rgba(10,10,10,.78); text-shadow: none; }

.fs-lite .eyebrow { color: #a50d26; text-shadow: none; }
.fs-lite .eyebrow .eyebrow-num { color: rgba(10,10,10,.62); }

/* Buttons: the shared .btn-cta is bone-on-transparent with a bone hairline,
   which is invisible on bone. */
.fs-lite .btn-cta {
  color: var(--ink);
  border-color: rgba(10,10,10,.26);
  background: transparent;
}
.fs-lite .btn-cta:hover { background: var(--red); border-color: var(--red); color: #fff; }
.fs-lite .btn-cta--red { background: var(--red); border-color: var(--red); color: #fff; }
.fs-lite .btn-cta--red:hover { background: #a50d26; border-color: #a50d26; color: #fff; }

.fs-lite a:not(.btn-cta) { color: #a50d26; }
.fs-lite a:not(.btn-cta):hover { color: var(--red); }

/* Hairlines inside a light band have to invert too, or they vanish. */
.fs-lite .pr-step,
.fs-lite .pt-rows,
.fs-lite .pt-row { border-color: rgba(10,10,10,.14); }


/* ── C. SEPARATION ──────────────────────────────────────────────────────
   Between a bone band and a black one, the shared .ember (a red blur that
   assumes black on both sides) reads as a smear. On these four pages the
   join is made by the light band's own angled edge instead — a hard, sharp
   line rather than a fade, which is what "black shading and separations"
   plus "more sharp" asks for.

   The clip eats into the band, so each variant pays its padding back. */
.fs-lite--cut-top {
  clip-path: polygon(0 2.4rem, 100% 0, 100% 100%, 0 100%);
  padding-top: calc(clamp(3.2rem, 5.5vw, 4.6rem) + 2.4rem);
}
.fs-lite--cut-bottom {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2.4rem), 0 100%);
  padding-bottom: calc(clamp(3.2rem, 5.5vw, 4.6rem) + 2.4rem);
}
.fs-lite--cut-both {
  clip-path: polygon(0 2.4rem, 100% 0, 100% calc(100% - 2.4rem), 0 100%);
  padding-block: calc(clamp(3.2rem, 5.5vw, 4.6rem) + 2.4rem);
}
/* A cut band needs black behind it to cut INTO, otherwise the angle shows
   the page ground. .fs-seat is the black seat the light band sits on. */
.fs-seat { background: var(--ink); }
@media (max-width: 640px) {
  /* A 2.4rem diagonal across a 390px viewport is a 7-degree slope that just
     looks like a mistake; square it off on phones. */
  .fs-lite--cut-top,
  .fs-lite--cut-bottom,
  .fs-lite--cut-both { clip-path: none; }
}

/* The black separator strip: short, hatched, and doing a job — never a
   band of sparse light type over a photograph, which is the template being
   killed here. */
.fs-rule {
  position: relative;
  background: var(--ink);
  padding-block: clamp(1.6rem, 3vw, 2.4rem);
  overflow: hidden;
}
.fs-rule__line {
  display: block;
  height: 1px;
  background: linear-gradient(90deg, var(--red) 0 22%, rgba(245,241,232,.16) 22% 100%);
}


/* ── D. CONTAINED IMAGERY ───────────────────────────────────────────────
   "no images going left to right border". A section BACKGROUND may be full
   width; a photograph inside one may not. Every content image on these four
   pages is bounded, shaped and given ground around it. */
.fs-figure {
  position: relative;
  margin: 0;
  max-width: 380px;
}
.fs-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}


/* ══════════════════════════════════════════════════════════════════════
   E. /firm
   ══════════════════════════════════════════════════════════════════════ */

/* S.01 and S.03 are the reading bands and are now bone. S.02 keeps its film
   loop and is the black beat between them; the hero and the close are the
   other two. dark → light → dark → light → dark. */
.pg-firm .fs-lite .fm-founder-aside__name { color: var(--ink); }
.pg-firm .fs-lite .fm-founder-aside__role { color: rgba(10,10,10,.62); }
.pg-firm .fs-lite .fm-founder-aside__caption { border-top-color: rgba(10,10,10,.16); }
/* The founder quote is verbatim and stays. It gets the weight it earned:
   ink, not a 0.82-alpha wash on black. */
.pg-firm .fs-lite .fm-founder-aside__quote {
  color: rgba(10,10,10,.84);
  border-left-color: var(--red);
}

/* The portrait: soft (blob-a) and contained at 300px, with a SHARP red slab
   behind its lower-left so the two shape languages meet on one object. */
.pg-firm .fm-founder-aside__figure { position: relative; display: inline-block; }
.pg-firm .fm-founder-aside__figure::before {
  content: '';
  position: absolute;
  left: -.9rem;
  bottom: -.9rem;
  width: 46%;
  height: 46%;
  background: var(--red);
  opacity: .16;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 1.4rem), calc(100% - 1.4rem) 100%, 0 100%);
}
.pg-firm .fm-founder-aside__img {
  max-width: 300px;
  border-radius: 63% 37% 55% 45% / 56% 50% 50% 44%;
  filter: grayscale(.08) contrast(1.03);
  background: rgba(10,10,10,.04);
  position: relative;
}

/* The timeline / process row on bone. The red tick over each label stays;
   the hairline inverts. */
.pg-firm .fs-lite .pr-step { border-top-color: rgba(10,10,10,.16); }
.pg-firm .fs-lite .pr-step__num { color: rgba(10,10,10,.6); }
.pg-firm .fs-lite .pr-step__title { color: var(--ink); }
.pg-firm .fs-lite .pr-step__title em { color: var(--red); }
.pg-firm .fs-lite .pr-step__copy { color: rgba(10,10,10,.76); }
/* Alternate the tick: sharp on the odd steps, a soft cap on the even ones,
   so four columns are not four identical marks. */
.pg-firm .fs-lite .pr-step:nth-child(even)::before { border-radius: 999px; height: 2px; top: -1.5px; }

/* S.03's closing bench block: the CTA that used to be its own near-empty
   section, folded into the foot of the band above it. One fewer slab. */
.fm-bench-foot {
  margin-top: clamp(2.2rem, 4vw, 3.2rem);
  padding-top: clamp(1.6rem, 3vw, 2.2rem);
  border-top: 1px solid rgba(10,10,10,.16);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1.2rem, 3vw, 2.6rem);
  align-items: center;
}
.fm-bench-foot__copy { margin: 0; max-width: 54ch; }
.fm-bench-foot .pr-ctas { margin: 0; display: flex; gap: .8rem; flex-wrap: wrap; }
@media (max-width: 860px) {
  .fm-bench-foot { grid-template-columns: 1fr; }
}

/* S.02 stays black but stops being a slab: the two advisory panels get the
   soft/sharp pairing rather than two matching boxes. */
.pg-firm .sv-duality__panel--eye  { border-radius: 40% 60% 56% 44% / 55% 42% 58% 45%; }
.pg-firm .sv-duality__panel--eye,
.pg-firm .sv-duality__panel--storm { padding: clamp(1.4rem, 3vw, 2.1rem); }
.pg-firm .sv-duality__panel--storm { clip-path: polygon(1.4rem 0, 100% 0, 100% calc(100% - 1.4rem), calc(100% - 1.4rem) 100%, 0 100%, 0 1.4rem); }


/* ══════════════════════════════════════════════════════════════════════
   F. /team — 13 real people, rendered live from Supabase team_members
   ══════════════════════════════════════════════════════════════════════ */

/* The roster band is the page's reading band, so it goes bone. Everything
   in the carousel was drawn for black and has to be re-drawn. */
.pg-team .fs-lite .tm-search__input {
  background: #fff;
  border-color: rgba(10,10,10,.20);
  color: var(--ink);
}
.pg-team .fs-lite .tm-search__input::placeholder { color: rgba(10,10,10,.60); }
.pg-team .fs-lite .tm-search__input:focus { border-color: var(--red); background: rgba(200,16,46,.04); }
.pg-team .fs-lite .tm-search__icon { color: rgba(10,10,10,.5); }
.pg-team .fs-lite .tm-search__clear { color: rgba(10,10,10,.55); }
.pg-team .fs-lite .tm-search__clear:hover,
.pg-team .fs-lite .tm-search__clear:focus-visible { color: var(--ink); background: rgba(10,10,10,.07); }
.pg-team .fs-lite .tm-search__status { color: rgba(10,10,10,.62); }
.pg-team .fs-lite .tm-empty { color: rgba(10,10,10,.62); }
.pg-team .fs-lite .tm-card-mark,
.pg-team .fs-lite .team-card mark { background: rgba(200,16,46,.20); color: var(--ink); }

.pg-team .fs-lite .tm-chevron { border-color: rgba(10,10,10,.22); color: var(--ink); }
.pg-team .fs-lite .tm-chevron:hover,
.pg-team .fs-lite .tm-chevron:focus-visible { border-color: var(--red); color: #a50d26; }
.pg-team .fs-lite .tm-playpause { border-color: rgba(10,10,10,.22); color: rgba(10,10,10,.66); }
.pg-team .fs-lite .tm-playpause:hover,
.pg-team .fs-lite .tm-playpause:focus-visible { border-color: rgba(10,10,10,.45); color: var(--ink); }

.pg-team .fs-lite .team-card { background: none; border: none; }
.pg-team .fs-lite .team-card__name { color: var(--ink); }
.pg-team .fs-lite .team-card__role { color: #a50d26; }
.pg-team .fs-lite .team-card__role .tm-dash { background: var(--red); }
.pg-team .fs-lite .team-card__photo {
  background: rgba(10,10,10,.05);
  border: 1px solid rgba(10,10,10,.12);
}
.pg-team .fs-lite .team-card__photo img { filter: grayscale(.10); }
.pg-team .fs-lite .team-card__initials {
  color: rgba(10,10,10,.34);
  background: radial-gradient(80% 80% at 70% 20%, rgba(200,16,46,.13) 0%, transparent 60%), rgba(10,10,10,.05);
}
/* The mask that keeps a name from being sliced mid-word has to fade to the
   band's own ground, not to black. */
.pg-team .fs-lite .tm-carousel__viewport.tm-live {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
/* Alternate the portrait silhouette down the track: circle, arch, blob-a,
   blob-b, chamfer — five in rotation, so thirteen faces are not thirteen
   identical circles. Soft and sharp interleaved. */
.pg-team .tm-carousel .team-card:nth-child(5n+2) .team-card__photo { border-radius: 50% 50% 12% 12% / 34% 34% 8% 8%; }
.pg-team .tm-carousel .team-card:nth-child(5n+3) .team-card__photo { border-radius: 63% 37% 55% 45% / 56% 50% 50% 44%; }
.pg-team .tm-carousel .team-card:nth-child(5n+4) .team-card__photo { border-radius: 40% 60% 56% 44% / 55% 42% 58% 45%; }
.pg-team .tm-carousel .team-card:nth-child(5n+5) .team-card__photo {
  border-radius: 0;
  clip-path: polygon(1.1rem 0, 100% 0, 100% calc(100% - 1.1rem), calc(100% - 1.1rem) 100%, 0 100%, 0 1.1rem);
}

/* The disciplines row: what the bench is actually made of. Sits above the
   search box, alternating soft chip / cut chip. No counters, no claims —
   four practice names the firm already publishes elsewhere on the site. */
.tm-disciplines {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: clamp(1.4rem, 2.6vw, 1.9rem);
  padding: 0;
  list-style: none;
}
.tm-disciplines li {
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(10,10,10,.72);
  border: 1px solid rgba(10,10,10,.18);
  padding: .5rem 1rem;
}
.tm-disciplines li:nth-child(odd) { border-radius: 999px; }
.tm-disciplines li:nth-child(even) { clip-path: polygon(.55rem 0, 100% 0, 100% calc(100% - .55rem), calc(100% - .55rem) 100%, 0 100%, 0 .55rem); }
.tm-disciplines li::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 1px;
  background: var(--red);
  vertical-align: middle;
  margin-right: .6rem;
}


/* ══════════════════════════════════════════════════════════════════════
   G. /contact — the conversion endpoint every other page funnels into
   ══════════════════════════════════════════════════════════════════════ */

/* T-1121 wrote .pg-contact .ct-grid. The markup has never had a .ct-grid —
   it is .ct-layout — so that rule matched nothing and shipped as a no-op.
   Exactly the failure the brief warns about: read the page's real markup. */
.pg-contact .fs-lite .ct-layout { align-items: start; }

.pg-contact .fs-lite .ct-field label { color: rgba(10,10,10,.66); }
.pg-contact .fs-lite .ct-field input,
.pg-contact .fs-lite .ct-field select,
.pg-contact .fs-lite .ct-field textarea {
  background: #fff;
  border: 1px solid rgba(10,10,10,.20);
  color: var(--ink);
}
.pg-contact .fs-lite .ct-field input::placeholder,
.pg-contact .fs-lite .ct-field textarea::placeholder { color: rgba(10,10,10,.60); opacity: 1; }
.pg-contact .fs-lite .ct-field input:focus,
.pg-contact .fs-lite .ct-field select:focus,
.pg-contact .fs-lite .ct-field textarea:focus {
  border-color: var(--red);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(200,16,46,.12);
}
.pg-contact .fs-lite .ct-field select option { background: #fff; color: var(--ink); }
.pg-contact .fs-lite .ct-status--ok  { color: #1f7a3d; }
.pg-contact .fs-lite .ct-status--err { color: #b3122c; }

/* The aside stops being a hairline-left column and becomes a card with a
   ground of its own — the one place on the page a visitor looks for the
   address and the phone number. Soft top-left, cut bottom-right. */
.pg-contact .fs-lite .ct-aside {
  border-left: 0;
  padding: clamp(1.4rem, 3vw, 2rem);
  background: #fff;
  border: 1px solid rgba(10,10,10,.12);
  border-radius: 1.4rem 0 0 0;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 1.6rem), calc(100% - 1.6rem) 100%, 0 100%);
  gap: 1.6rem;
}
.pg-contact .fs-lite .ct-aside__block h3 { color: #a50d26; }
.pg-contact .fs-lite .ct-aside__block p,
.pg-contact .fs-lite .ct-aside__block address { color: rgba(10,10,10,.76); }
.pg-contact .fs-lite .ct-aside__block a { color: var(--ink); border-bottom-color: rgba(10,10,10,.28); }
.pg-contact .fs-lite .ct-aside__block a:hover { color: var(--red); border-bottom-color: var(--red); }
@media (max-width: 860px) {
  .pg-contact .fs-lite .ct-aside { border-top: 1px solid rgba(10,10,10,.12); }
}

/* The two social links were pasted into the office block still wearing the
   FOOTER's own class names, so footer.css was styling them mid-page. Their
   own scoped treatment, in the aside where they belong. */
.ct-social { display: flex; gap: .6rem; margin-top: 1rem; }
.ct-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border: 1px solid rgba(10,10,10,.18);
  border-radius: 50%;
  color: rgba(10,10,10,.7);
  border-bottom-width: 1px;
  transition: color .2s, border-color .2s;
}
.ct-social a:nth-child(even) {
  border-radius: 0;
  clip-path: polygon(.45rem 0, 100% 0, 100% calc(100% - .45rem), calc(100% - .45rem) 100%, 0 100%, 0 .45rem);
}
.ct-social a:hover { color: var(--red); border-color: var(--red); }
.ct-social svg { width: 14px; height: 14px; fill: currentColor; }

/* "What happens next" — the black beat that closes the funnel. Three real
   steps, no promised turnaround, no metric. Short by design. */
.ct-next { background: var(--ink); padding-block: clamp(2.6rem, 4.5vw, 3.6rem); position: relative; overflow: hidden; }
.ct-next__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.2rem, 3vw, 2.4rem);
  margin-top: clamp(1.2rem, 2.4vw, 1.8rem);
}
.ct-next__item { padding-top: 1.1rem; border-top: 1px solid rgba(245,241,232,.16); position: relative; }
.ct-next__item::before {
  content: '';
  position: absolute;
  top: -1px; left: 0;
  width: 30px; height: 2px;
  background: var(--red);
}
.ct-next__item:nth-child(even)::before { border-radius: 999px; }
.ct-next__num {
  font-family: var(--font-mono);
  font-size: .6rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--red-text);
  margin: 0 0 .5rem;
}
.ct-next__copy { margin: 0; font-size: .9rem; line-height: 1.7; color: rgba(245,241,232,.74); }
@media (max-width: 720px) {
  .ct-next__grid { grid-template-columns: 1fr; }
}


/* ══════════════════════════════════════════════════════════════════════
   H. /partners — four lines and "Coming soon", linked from every header
   ══════════════════════════════════════════════════════════════════════ */

/* No photograph on this page at all. It was a single black slab with four
   sentences on it; a stock desk shot would only have made it a worse
   version of the banned template. It gets a DRAWN opening band instead —
   crossing diagonals, one soft form, one cut form — then the light reading
   band, then the close. */
.pt-open {
  position: relative;
  background: var(--ink);
  overflow: hidden;
  padding-block: clamp(3.4rem, 6vw, 5rem);
  min-height: clamp(300px, 34vw, 420px);
  display: flex;
  align-items: center;
}
.pt-open__art { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.pt-open__art i {
  position: absolute;
  display: block;
}
/* soft */
.pt-open__art i:nth-child(1) {
  right: 6%; top: -14%;
  width: 30vw; max-width: 400px; aspect-ratio: 1;
  background: radial-gradient(circle at 34% 30%, rgba(200,16,46,.30) 0%, rgba(200,16,46,.05) 58%, transparent 72%);
  border-radius: 63% 37% 55% 45% / 56% 50% 50% 44%;
}
/* sharp */
.pt-open__art i:nth-child(2) {
  right: 18%; bottom: -18%;
  width: 22vw; max-width: 290px; aspect-ratio: 1;
  background: linear-gradient(140deg, rgba(245,241,232,.09), rgba(245,241,232,.01));
  clip-path: polygon(0 0, 100% 22%, 78% 100%, 0 72%);
}
/* the crossing diagonals */
.pt-open__art i:nth-child(3) {
  inset: 0;
  width: auto; height: auto;
  background-image:
    repeating-linear-gradient( 45deg, rgba(245,241,232,.055) 0 1px, transparent 1px 17px),
    repeating-linear-gradient(-45deg, rgba(245,241,232,.035) 0 1px, transparent 1px 26px);
  -webkit-mask-image: radial-gradient(ellipse 74% 96% at 78% 50%, #000 0%, transparent 78%);
          mask-image: radial-gradient(ellipse 74% 96% at 78% 50%, #000 0%, transparent 78%);
}
.pt-open .inner { position: relative; z-index: 1; }
.pt-open__h1 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.45rem, 2.9vw, 2rem);
  line-height: 1.14; letter-spacing: -.02em;
  color: var(--on-black);
  margin: 0 0 1.1rem;
}
.pt-open__h1 em { font-style: italic; color: var(--red); }
.pt-open__lede { max-width: 56ch; }

/* The rows, now on bone. The existing .pt-row grid is kept; only the
   grounds and the hairlines change. */
.pg-partners .fs-lite .pt-rows { border-top-color: rgba(10,10,10,.18); }
.pg-partners .fs-lite .pt-row { border-bottom-color: rgba(10,10,10,.12); }
.pg-partners .fs-lite .pt-row__name { color: var(--ink); }
.pg-partners .fs-lite .pt-row__name span { color: #a50d26; }
.pg-partners .fs-lite .pt-row__body { color: rgba(10,10,10,.78); }
.pg-partners .fs-lite .pt-row__body b { color: var(--ink); font-weight: 600; }
.pg-partners .fs-lite .pt-note { color: rgba(10,10,10,.68); }
/* Alternate a soft and a cut marker down the rows. */
.pg-partners .pt-row { position: relative; padding-left: 0; }
.pg-partners .pt-row::before {
  content: '';
  position: absolute;
  left: 0; top: calc(clamp(1.15rem, 2.2vw, 1.55rem) + .35rem);
  width: 10px; height: 10px;
  background: var(--red);
  opacity: .85;
}
.pg-partners .pt-row:nth-child(odd)::before { border-radius: 50% 50% 12% 12% / 34% 34% 8% 8%; }
.pg-partners .pt-row:nth-child(even)::before { clip-path: polygon(0 0, 100% 0, 100% 62%, 62% 100%, 0 100%); }
.pg-partners .pt-row__name { padding-left: 1.5rem; }
@media (max-width: 700px) {
  .pg-partners .pt-row__body { padding-left: 1.5rem; }
}


/* ── I. BAND HEIGHT, AGAIN ──────────────────────────────────────────────
   "sections are too long". Measured at 1440x900 after the change; every
   band on these four pages is now well under the viewport. The hero caps
   in site.css are NOT touched. */
.pg-firm    .fs-lite,
.pg-team    .fs-lite,
.pg-contact .fs-lite { padding-block: clamp(3.2rem, 5.5vw, 4.6rem); }
.pg-partners .fs-lite { padding-block: clamp(3rem, 5vw, 4.2rem); }


/* ── J. POLISH, AFTER LOOKING AT THE SCREENSHOTS ────────────────────────
   Everything below is a response to something visible in the 1440 and 390
   captures, not a guess. */

/* /firm S.02 — the soft/sharp pairing on the two consulting panels was
   invisible: the panels have no ground, so a border-radius and a clip-path
   had nothing to shape. They get a ground now, and the shapes read. */
.pg-firm .sv-duality__panel {
  background: rgba(245, 241, 232, .045);
  border: 1px solid rgba(245, 241, 232, .10);
}
.pg-firm .sv-duality__panel--eye  { border-radius: 1.9rem 1.9rem 1.9rem .4rem; }
.pg-firm .sv-duality__panel--storm { border-radius: 0; }

/* /firm — the red slab behind the portrait ran under the caption and read as
   a stray pink rectangle. Pinned to the portrait, darker, and cut on the
   opposite diagonal to the blob it sits behind. */
.pg-firm .fm-founder-aside__figure::before {
  left: -1.1rem;
  bottom: auto;
  top: 34%;
  width: 42%;
  height: 44%;
  opacity: .22;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 1.6rem), calc(100% - 1.6rem) 100%, 0 100%);
}
@media (max-width: 900px) {
  /* At the stacked breakpoint the portrait is 132px and the slab just crowds
     it. Off. */
  .pg-firm .fm-founder-aside__figure::before { display: none; }
}

/* /team — 90px of dead bone between the search field and the carousel
   controls, which read as a missing element rather than breathing room. */
.pg-team .fs-lite .tm-carousel { margin-top: clamp(1.4rem, 2.4vw, 1.9rem); }
.pg-team .fs-lite .tm-carousel__controls { margin-bottom: .8rem; }

/* /partners — the row markers were 10px and the arch read the same as the
   cut at that size. Bigger, and the two silhouettes now differ plainly. */
.pg-partners .pt-row::before { width: 15px; height: 15px; }
.pg-partners .pt-row:nth-child(even)::before { clip-path: polygon(0 0, 100% 0, 100% 55%, 55% 100%, 0 100%); }
.pg-partners .pt-row__name { padding-left: 2rem; }
@media (max-width: 700px) {
  .pg-partners .pt-row__body { padding-left: 2rem; }
}

/* /contact — a #fff card on a #faf8f3 ground is a 2% step; the aside was
   only being held by its hairline. A soft drop gives it the lift it needs
   to read as the reference block beside the form. */
.pg-contact .fs-lite .ct-aside { box-shadow: 0 12px 34px rgba(10, 10, 10, .07); }


/* ── K. SMALL TYPE ON A LIGHT GROUND ────────────────────────────────────
   Found by rasterising each element's own box and reading the painted
   pixels — not a DOM style walk, which would have reported all of this as
   fine because the DECLARED colours were fine.

   The declared colour is not what gets painted. A .62rem JetBrains Mono
   glyph at weight 400 is roughly one device pixel wide, so antialiasing
   never lets it reach its own colour: "2020" was declared rgba(10,10,10,.6)
   — about [106,106,105] — and measured [191,189,186], a real 1.77:1 against
   bone where the DOM said 5.5:1.

   On black this problem hides, because AA blooms a light glyph BRIGHTER and
   the error runs in the safe direction. Flip the ground and the same type
   goes to mush. That is the actual mechanism behind "too hard to read so
   much of it", and it is why a light-ground pass cannot just invert colours.

   So every small mono run on a light ground gets darker ink AND weight 500.
   Weight does more of the work than colour here: it puts a second covered
   pixel under the stroke. Re-measured after, on painted pixels. */
.fs-lite .eyebrow {
  color: #8a0a1f;
  font-weight: 500;
}
.fs-lite .eyebrow .eyebrow-num { color: rgba(10, 10, 10, .76); font-weight: 500; }

.pg-firm .fs-lite .pr-step__num { color: rgba(10, 10, 10, .74); font-weight: 500; }
/* The italic serif accent inside a 1.08rem step title is thinner again than
   the mono, so it takes the darker red rather than the display red. */
.pg-firm .fs-lite .pr-step__title em { color: #a50d26; }
.pg-firm .fs-lite .fm-founder-aside__role { color: rgba(10, 10, 10, .74); font-weight: 500; }

.pg-team .fs-lite .tm-disciplines li { color: rgba(10, 10, 10, .84); font-weight: 500; }
.pg-team .fs-lite .team-card__role { color: #8a0a1f; font-weight: 500; }
.pg-team .fs-lite .tm-search__status { color: rgba(10, 10, 10, .74); font-weight: 500; }
.pg-team .fs-lite .tm-playpause { color: rgba(10, 10, 10, .76); font-weight: 500; }

.pg-contact .fs-lite .ct-field label { color: rgba(10, 10, 10, .80); font-weight: 500; }
.pg-contact .fs-lite .ct-aside__block h3 { color: #8a0a1f; font-weight: 600; }
.pg-contact .fs-lite .ct-aside__hours { margin-top: .4em; font-size: .88rem; color: rgba(10, 10, 10, .74); }
/* Uppercase .85rem on a red fill is the same thin-stroke problem in reverse. */
.fs-lite .btn-cta { font-weight: 600; }

.pg-partners .fs-lite .pt-row__name span { color: #8a0a1f; font-weight: 500; }

/* ── L. SMALL RED TYPE ON THE NEW DARK BANDS ────────────────────────────
   --red-text (#e8455a) is tuned for body-sized type on black. At .6rem mono
   with .18em tracking it measured 2.47:1 in the After You Send It band. A
   lighter red at weight 500, scoped to the two bands this task added — the
   token itself is used sitewide and is not mine to move. */
.ct-next__num,
.pt-open .eyebrow { color: #ff5f72; font-weight: 500; }
.ct-next .eyebrow { color: #ff6a7c; font-weight: 500; }
.ct-next .eyebrow .eyebrow-num { color: rgba(245, 241, 232, .74); }

/* Second pass on the same measurement. Weight 500 moved every one of these
   in the right direction but left .6rem tracked mono short of 4.5:1 against
   bone. Weight 600 and near-full ink is what actually clears it — the type
   SIZE is not touched, per the sitewide scale being deliberately 17% down. */
.fs-lite .eyebrow { color: #7a0819; font-weight: 600; }
.fs-lite .eyebrow .eyebrow-num { color: rgba(10, 10, 10, .88); font-weight: 600; }
.pg-firm .fs-lite .pr-step__num { color: rgba(10, 10, 10, .88); font-weight: 600; }
.pg-team .fs-lite .team-card__role { color: #7a0819; font-weight: 600; }
.pg-team .fs-lite .tm-disciplines li { color: rgba(10, 10, 10, .90); font-weight: 600; }
.pg-contact .fs-lite .ct-field label { color: rgba(10, 10, 10, .88); font-weight: 600; }
.pg-contact .fs-lite .ct-aside__block h3 { color: #7a0819; font-weight: 700; }
.pg-partners .fs-lite .pt-row__name span { color: #7a0819; font-weight: 600; }