/* ============================================================================
   InnaPace facelift v1
   Brief: CODE-innapace-homepage-match-the-mockup-2026-10-09.md, which replaces the
   earlier "restyle the live sections" instruction for the HOMEPAGE. Everything
   under .ip-fl is ported from innapace-homepage-navy-mockup-2026-10-09.html,
   variant v2, which is the design Marq approved. Section 4 at the end is Find,
   which is still a restyle of the live page.

   Loaded LAST and only when body carries .ip-facelift, which the switch adds only
   on the homepage and /find-a-professional/ and only when it is on. Nothing here
   can reach any other page.

   WHY EVERY MOCKUP CLASS IS PREFIXED ip-fl-. The mockup uses short names the theme
   already owns: .head, .body, .av, .cap, .node, .chip, .btn, .lnk, .f, .n, .k.
   Porting them unprefixed would have collided with the live site in both
   directions. The prefix is the only edit made to the mockup's class names.

   The variant tokens are RESOLVED, not shipped: the mockup carries v1, v2 and v3
   and a switcher for them. Only v2's values are here.
   ============================================================================ */

.ip-facelift {
  --fl-navy: #0d1b2a;
  --fl-teal: #2fa68c;
  --fl-tealD: #1f7d69;
  --fl-coral: #e57b3f;
  --fl-coralD: #c35f27;
  /* Button fill only, per CODE-innapace-coral-button-contrast-2026-10-11. White on
     #c35f27 is 4.21:1, under the 4.5 normal text needs; white on #b5531d clears it.
     Coral as an ACCENT (dots, outlines, eyebrows on navy, chips) keeps --fl-coral
     and --fl-coralD, because the ruling is about filled buttons with white text. */
  --fl-coralBtn: #b5531d;
  --fl-coralBtnH: #9f4818;
  --fl-cream: #faf7f2;
  --fl-sage: #e8efe9;
  --fl-ink2: #4a5866;
  --fl-line: #e6dfd4;

  /* v2's tokens */
  --fl-r: 12px;
  --fl-card: #fff;
  --fl-cardSh: 0 0 0 1px #ece6dc;
  /* The light end was var(--fl-teal) #2fa68c, which measures 2.83:1 on cream at its
     lightest point and so fails 3:1 on every light section, not just Find. Brief
     CODE-innapace-fade-sitewide-and-order-2026-10-11 section 1: end it at #26907a
     everywhere on light backgrounds. The navy-band fade is --fl-gradDk and is a
     separate case, measured on navy rather than changed on principle. */
  --fl-grad: linear-gradient(92deg, var(--fl-navy) 0%, var(--fl-tealD) 55%, #26907a 100%);
  --fl-gradDk: linear-gradient(92deg, #faf7f2 0%, var(--fl-teal) 55%, var(--fl-coral) 100%);

  --fl-page-max: 1580px;
  --fl-gutter: 40px;

  /* Names the Find section (section 4) uses. They were defined in the first version of this
     sheet and the homepage rewrite dropped them, which silently turned every
     border-radius: var(--fl-radius-chip) into 0: the filter box's four selects lost their
     corners while the hero search bar kept 6px, so the two did not match at all, which is the
     one thing the brief asked for. Declared here rather than inlined, so there is still one
     place to change them. */
  --fl-paper: #fff;
  --fl-ink-mid: var(--fl-ink2);
  --fl-radius-card: 12px;
  --fl-radius-chip: 6px;
}
@media (max-width: 767.98px) { .ip-facelift { --fl-gutter: 16px; } }

/* ---------------------------------------------------------------------------
   Shared chrome. .fl-* names are used by the Find page; .ip-fl-* by the homepage.
   --------------------------------------------------------------------------- */

.ip-facelift .fl-fade,
.ip-facelift .ip-fl-f {
  background-image: var(--fl-g, var(--fl-grad));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
/* a browser without background-clip:text gets readable text, not invisible text */
@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
  .ip-facelift .fl-fade,
  .ip-facelift .ip-fl-f {
    background-image: none;
    -webkit-text-fill-color: currentColor;
    color: var(--fl-tealD);
  }
  .ip-facelift .ip-fl-dk .ip-fl-f { color: var(--fl-teal); }
}
@media (prefers-contrast: more) {
  .ip-facelift .fl-fade,
  .ip-facelift .ip-fl-f {
    background-image: none;
    -webkit-text-fill-color: currentColor;
    color: inherit;
  }
}

.ip-facelift .fl-eyebrow,
.ip-facelift .ip-fl-eb {
  font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--fl-tealD);
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.ip-facelift .ip-fl-eb::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.ip-facelift .ip-fl-dk .ip-fl-eb { color: var(--fl-coral); }

.ip-facelift .fl-h1,
.ip-facelift .ip-fl-h1 {
  font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
  font-weight: 800;
  font-size: clamp(48px, 5.4vw, 92px);
  line-height: .98;
  letter-spacing: -.045em;
  margin: 18px 0 26px;
}
.ip-facelift .ip-fl-h2 {
  font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
  font-weight: 800;
  font-size: clamp(36px, 3.6vw, 60px);
  letter-spacing: -.03em;
  line-height: 1.04;
  margin: 14px 0;
  color: inherit;
}
.ip-facelift .ip-fl-lede {
  font-size: 19px;
  line-height: 1.6;
  color: var(--fl-mut, var(--fl-ink2));
  max-width: 620px;
}

.ip-facelift .ip-fl-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  padding: 13px 22px;
  font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
  font-weight: 700;
  font-size: 15px;
  border: 0;
  white-space: nowrap;
  min-height: 44px;
  cursor: pointer;
  text-decoration: none;
}
.ip-facelift .ip-fl-bP { background: var(--fl-coralBtn); color: #fff; }
.ip-facelift .ip-fl-bP:hover { background: var(--fl-coralBtnH); }
.ip-facelift .ip-fl-bG { background: transparent; border: 1.5px solid currentColor; opacity: .9; color: inherit; }
.ip-facelift .ip-fl-btn:focus-visible { outline: 2px solid var(--fl-coral); outline-offset: 3px; }

.ip-facelift .ip-fl-lnk {
  font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
  font-weight: 700;
  font-size: 15px;
  color: var(--fl-tealD);
  display: inline-flex;
  gap: 6px;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
}
.ip-facelift .ip-fl-lnk:hover { text-decoration: underline; }
.ip-facelift .ip-fl-dk .ip-fl-lnk { color: #7fd6c1; }

.ip-facelift .ip-fl-chip {
  display: inline-block;
  border-radius: 6px;
  padding: 4px 9px;
  font-size: 12.5px;
  font-weight: 500;
  background: var(--fl-sage);
  color: var(--fl-tealD);
  line-height: 1.35;
}
.ip-facelift .ip-fl-tagt { font-size: 12.5px; color: var(--fl-mut, var(--fl-ink2)); }
.ip-facelift .ip-fl-lang {
  color: var(--fl-coralD);
  font-weight: 600;
  font-size: 13.5px;
  display: flex;
  gap: 6px;
  align-items: center;
}
.ip-facelift .ip-fl-lang svg { flex: none; }
.ip-facelift .ip-fl-status {
  font-size: 13px;
  color: var(--fl-tealD);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ip-facelift .ip-fl-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--fl-teal); }

/* avatars: a photograph, or initials on one of the mockup's six gradients */
.ip-facelift .ip-fl-av {
  border-radius: calc(var(--fl-r) - 4px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
  font-weight: 700;
  position: relative;
  overflow: hidden;
}
.ip-facelift .ip-fl-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ip-facelift .ga { background: linear-gradient(155deg, #3cb497, #0d1b2a); }
.ip-facelift .gb { background: linear-gradient(155deg, #ec8a52, #7a3416); }
.ip-facelift .gc { background: linear-gradient(155deg, #1f7d69, #0d1b2a); }
.ip-facelift .gd { background: linear-gradient(155deg, #2fa68c, #1f7d69); }
.ip-facelift .ge { background: linear-gradient(155deg, #0d1b2a, #24435f); }
.ip-facelift .gf { background: linear-gradient(155deg, #e57b3f, #2fa68c); }

/* ---------------------------------------------------------------------------
   Section shells and tones
   --------------------------------------------------------------------------- */

.ip-facelift .ip-fl-sec {
  background: var(--fl-sbg, var(--fl-cream));
  color: var(--fl-sfg, var(--fl-navy));
  --fl-mut: var(--fl-smut, var(--fl-ink2));
  --fl-g: var(--fl-sgrad, var(--fl-grad));
  padding: 104px 0;
}
.ip-facelift .ip-fl-wrap {
  max-width: var(--fl-page-max);
  margin-inline: auto;
  padding-inline: var(--fl-gutter);
}
.ip-facelift .ip-fl-tC { --fl-sbg: var(--fl-cream); }
.ip-facelift .ip-fl-tW { --fl-sbg: #fff; }
.ip-facelift .ip-fl-tS { --fl-sbg: var(--fl-sage); }
.ip-facelift .ip-fl-dk {
  --fl-sbg: var(--fl-navy);
  --fl-sfg: #f2efe9;
  --fl-smut: #a9b6c2;
  --fl-sgrad: var(--fl-gradDk);
}
.ip-facelift .ip-fl-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 34px;
}

/* ---------------------------------------------------------------------------
   1. Hero
   --------------------------------------------------------------------------- */

.ip-facelift .ip-fl-hero {
  position: relative;
  background: var(--fl-cream);
  overflow: hidden;
  padding: 0 var(--fl-gutter);
  max-width: none;
}
.ip-facelift .ip-fl-hero-in {
  max-width: var(--fl-page-max);
  margin: 0 auto;
  display: block;
  min-height: 920px;
  position: relative;
}
/* THE WATERMARK. Text, not an image: the letters are CSS content, which is what an
   earlier audit chose so they cannot be scraped into the page text as a stray
   "Inna" before the eyebrow. It sits to the RIGHT, behind the photograph. */
.ip-facelift .ip-fl-wmk {
  position: absolute;
  right: -30px;
  left: auto;
  top: 40px;
  font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
  font-weight: 800;
  font-size: clamp(260px, 27vw, 470px);
  letter-spacing: -.06em;
  line-height: .9;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  background: linear-gradient(180deg, rgba(47,166,140,.16) 0%, rgba(47,166,140,.05) 75%, rgba(47,166,140,0) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.ip-facelift .ip-fl-wmk::before { content: "Inna"; }
@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
  .ip-facelift .ip-fl-wmk { background: none; -webkit-text-fill-color: rgba(47,166,140,.16); color: rgba(47,166,140,.16); }
}

.ip-facelift .ip-fl-hero-tx { position: relative; z-index: 2; padding: 130px 0 110px; max-width: 720px; }
.ip-facelift .ip-fl-hero .ip-fl-lede { max-width: 600px; }

.ip-facelift .ip-fl-sbox {
  margin-top: 34px;
  background: #fff;
  border-radius: 18px;
  padding: 20px 22px;
  box-shadow: 0 1px 2px rgba(13,27,42,.04), 0 14px 34px rgba(13,27,42,.08);
  max-width: 640px;
}
.ip-facelift .ip-fl-k {
  font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
  font-weight: 700;
  font-size: 14px;
  color: var(--fl-tealD);
  display: flex;
  gap: 8px;
  align-items: center;
}
.ip-facelift .ip-fl-k::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--fl-teal); }
.ip-facelift .ip-fl-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1.5px solid var(--fl-line);
  border-radius: 999px;
  padding: 7px 7px 7px 20px;
  margin: 14px 0;
  background: #fff;
}
.ip-facelift .ip-fl-bar svg { flex: none; }
/* 16px minimum: anything smaller and iOS zooms the page when the field is tapped. */
.ip-facelift .ip-fl-bar input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: var(--font-sans, 'Fira Sans', sans-serif);
  font-size: 16px;
  font-style: italic;
  color: var(--fl-navy);
  padding: 8px 0;
  text-overflow: ellipsis;
}
.ip-facelift .ip-fl-bar input::placeholder { color: #8b95a0; }
.ip-facelift .ip-fl-bar .ip-fl-btn { font-style: normal; padding: 11px 22px; }
.ip-facelift .ip-fl-ch { display: flex; gap: 8px; flex-wrap: wrap; }
.ip-facelift .ip-fl-ch a {
  border: 1.5px solid var(--fl-line);
  border-radius: 999px;
  padding: 6px 13px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--fl-navy);
  display: flex;
  gap: 6px;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
}
.ip-facelift .ip-fl-ch a::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--fl-teal); }
.ip-facelift .ip-fl-ch a:hover { border-color: var(--fl-teal); }
.ip-facelift .ip-fl-ch a:focus-visible { outline: 2px solid var(--fl-coral); outline-offset: 2px; }

.ip-facelift .ip-fl-pic { position: absolute; right: -40px; bottom: 0; width: 60%; max-width: 1000px; z-index: 1; }
.ip-facelift .ip-fl-pic img { width: 100%; height: auto; display: block; }

/* ---------------------------------------------------------------------------
   2. Practitioners carousel
   --------------------------------------------------------------------------- */

.ip-facelift .ip-fl-rail { overflow: hidden; }
.ip-facelift .ip-fl-track { display: flex; will-change: transform; transition: transform .6s ease; }
@media (prefers-reduced-motion: reduce) { .ip-facelift .ip-fl-track { transition: none; } }

.ip-facelift .ip-fl-pc {
  flex: 0 0 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: 22px;
  align-items: stretch;
}
/* no eligible facility: the six take the whole width and nothing is promoted */
.ip-facelift .ip-fl-pc--nofac { grid-template-columns: minmax(0, 1fr); }

/* THE FACILITY COLUMN: two cards stacked, together as tall as the six people beside them.
   Two equal row tracks with min-height:0 are what stop a long description on one card from
   taking height off the other. */
.ip-facelift .ip-fl-facs {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 22px;
  min-height: 0;
}
/* one eligible facility on this slide: the single card fills the column rather than sitting
   half-height above a hole */
.ip-facelift .ip-fl-facs--one { grid-template-rows: minmax(0, 1fr); }

.ip-facelift .ip-fl-fc {
  display: flex;
  flex-direction: column;
  background: var(--fl-card);
  border-radius: var(--fl-r);
  overflow: hidden;
  box-shadow: var(--fl-cardSh);
  min-height: 0;
}

/* THE BAND IS A FIXED HEIGHT AND NEVER GROWS. That is the point of the logo-top layout: the
   previous card let a contained wordmark stretch with the card, which is what opened the void
   underneath it. flex:none holds the band; the body takes everything else. */
.ip-facelift .ip-fl-fm {
  position: relative;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 150px is the band's PREFERRED height, not a fixed one. The card has to match a row of
     person cards, and a facility with a short description cannot fill that on text alone, so
     the leftover goes to the picture instead of pooling as a hole above the footer: measured
     at 1440, pooling put 61px under the details of one card and 119px under another. It can
     also shrink to 120px when a long name and a long tagline need the room, which is what
     keeps the footer inside the card rather than clipped by overflow:hidden. */
  flex: 1 1 150px;
  min-height: 120px;
  overflow: hidden;
}
.ip-facelift .ip-fl-fm--logo { background: #fff; border-bottom: 1px solid var(--fl-line); padding: 18px 24px; }
.ip-facelift .ip-fl-fm--photo { background: var(--fl-navy); }
.ip-facelift .ip-fl-av--fm { width: 100%; height: 100%; border-radius: 0; font-size: 46px; }
/* a wordmark is contained, so it is never cropped; a photograph fills the band and is anchored
   near the top, which is where a building's sign and a room's horizon sit */
.ip-facelift .ip-fl-fm--logo .ip-fl-av--fm img { object-fit: contain; }
/* CENTRED, not anchored high. Anchoring at 20% was a guess about where a building's sign sits;
   measured at 390 it sliced the word off Nation Performance's picture, which is a wordmark on
   black set as the listing's featured image and so takes the photograph branch. The centre crop
   is what a square source needs, and it costs a genuine photograph nothing. */
.ip-facelift .ip-fl-fm--photo .ip-fl-av--fm img { object-fit: cover; object-position: 50% 50%; }

.ip-facelift .ip-fl-fb {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  /* content tall, and only content tall. Anything else is slack with nowhere to go. */
  flex: 0 0 auto;
}
.ip-facelift .ip-fl-kind {
  font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fl-tealD);
}
.ip-facelift .ip-fl-fc h3 { font-size: 22px; letter-spacing: -.02em; line-height: 1.15; margin: 0; }
.ip-facelift .ip-fl-fc h3 a { color: inherit; text-decoration: none; }
.ip-facelift .ip-fl-fc h3 a:hover { text-decoration: underline; }
.ip-facelift .ip-fl-tg { color: var(--fl-ink2); font-size: 14px; line-height: 1.35; margin: 0; }
/* two lines, never a third. The text itself is already cut at a sentence or a word boundary
   server side, so the clamp never has to hide half a word. */
.ip-facelift .ip-fl-ds {
  font-size: 14px;
  line-height: 1.45;
  margin: 4px 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ip-facelift .ip-fl-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 16px;
  margin: 6px 0 0;
  font-size: 13.5px;
  color: var(--fl-ink2);
}
.ip-facelift .ip-fl-m { display: inline-flex; align-items: baseline; gap: 6px; min-width: 0; }
.ip-facelift .ip-fl-mi { font-size: 12px; line-height: 1.4; flex: none; }

/* NO margin-top:auto here. Parking the footer on the card's bottom edge is exactly what turned
   the card's leftover height into one blank run above it. The band absorbs the leftover now, so
   the footer sits directly under the details. */
.ip-facelift .ip-fl-foot {
  margin-top: 6px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid #f0ebe2;
}
.ip-facelift .ip-fl-team { min-width: 0; }
.ip-facelift .ip-fl-tcap {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #7a6f5f;   /* 4.92:1 on white; #8a7f70 measured 3.92 and 10.5px needs 4.5 */
}
.ip-facelift .ip-fl-tsa {
  font-size: 11px;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 700;
  color: var(--fl-tealD);
  text-decoration: none;
  white-space: nowrap;
}
.ip-facelift .ip-fl-tsa:hover { text-decoration: underline; }
.ip-facelift .ip-fl-tr { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
/* 52px, not 42px: a tile can now be a studio, and a studio's label is its name. At 42px
   "Reformer Studio" rendered as "Reform..." which is not that studio's name. */
.ip-facelift .ip-fl-tm {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  width: 52px;
  text-decoration: none;
  color: var(--fl-navy);
}
.ip-facelift .ip-fl-av--tm { width: 38px; height: 38px; font-size: 13px; border-radius: 10px; }
/* wraps to a second line rather than ending in an ellipsis. A first name never needs it; a
   studio name does, and truncating a name is not something to do to fit a layout. */
.ip-facelift .ip-fl-tn {
  display: -webkit-box;
  width: 52px;
  font-size: 10.5px;
  line-height: 1.2;
  color: var(--fl-ink2);
  text-align: center;
  overflow-wrap: break-word;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* the studio tile's fallback glyph: a door on sage, the same sage the +N tile uses.
   currentColor on the svg, so the colour is set here and not baked into the markup. */
.ip-facelift .ip-fl-av--studio {
  background: var(--fl-sage);
  color: #1c7260;
}
.ip-facelift .ip-fl-more {
  background: var(--fl-sage);
  /* not --fl-tealD: #1f7d69 on this sage measured 4.28:1, under the 4.5 this 13px tile needs */
  color: #1c7260;
  font-size: 13px;
}
/* margin-left:auto, not space-between alone: a facility with no team has only this link in the
   footer, and space-between would park it on the LEFT while the card stacked above it has its
   link on the right. */
.ip-facelift .ip-fl-vf {
  margin-left: auto;
  font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
  font-weight: 700;
  font-size: 14px;
  color: var(--fl-tealD);
  text-decoration: none;
  white-space: nowrap;
  flex: none;
  padding-bottom: 2px;
}
.ip-facelift .ip-fl-vf:hover { text-decoration: underline; }

.ip-facelift .ip-fl-grid6 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: 1fr 1fr;
  gap: 16px;
}
.ip-facelift .ip-fl-mini {
  background: var(--fl-card);
  border-radius: var(--fl-r);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: var(--fl-cardSh);
  transition: transform .2s, box-shadow .2s;
  color: var(--fl-navy);
  text-decoration: none;
  min-width: 0;
}
.ip-facelift .ip-fl-mini:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(13,27,42,.1); }
@media (prefers-reduced-motion: reduce) {
  .ip-facelift .ip-fl-mini { transition: none; }
  .ip-facelift .ip-fl-mini:hover { transform: none; }
}
.ip-facelift .ip-fl-mini:focus-visible { outline: 2px solid var(--fl-coral); outline-offset: 3px; }
/* The photograph IS the card: portrait 4:5, full card width, cropped from the top so a head is
   never cut off. The text block below is sized to its content, so the two rows of three still
   line up with the facility card without the cards growing taller. Initials tiles take the same
   frame, at a size that suits it. */
.ip-facelift .ip-fl-av--mini { aspect-ratio: 4 / 5; height: auto; width: 100%; font-size: 40px; }
.ip-facelift .ip-fl-mini h4 { font-size: 16px; letter-spacing: -.01em; line-height: 1.2; margin: 0; overflow-wrap: normal; }
.ip-facelift .ip-fl-mini p { font-size: 13px; color: var(--fl-ink2); line-height: 1.4; margin: 4px 0 0; }
.ip-facelift .ip-fl-mini .ip-fl-lang { font-size: 12.5px; margin-top: auto; }

.ip-facelift .ip-fl-ctrl { display: flex; align-items: center; gap: 14px; margin-top: 22px; justify-content: space-between; flex-wrap: wrap; }
.ip-facelift .ip-fl-dots { display: flex; gap: 8px; }
.ip-facelift .ip-fl-dot {
  background: none;
  border: 0;
  padding: 14px 0;
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.ip-facelift .ip-fl-dot i { width: 28px; height: 4px; border-radius: 4px; background: #d9d1c4; display: block; }
.ip-facelift .ip-fl-dot.on i { background: var(--fl-teal); }
.ip-facelift .ip-fl-dot:focus-visible { outline: 2px solid var(--fl-coral); outline-offset: 2px; }
.ip-facelift .ip-fl-arr { display: flex; gap: 8px; }
.ip-facelift .ip-fl-arr button {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid #d9d1c4;
  background: var(--fl-card);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--fl-navy);
}
.ip-facelift .ip-fl-arr button:hover { border-color: var(--fl-teal); }
.ip-facelift .ip-fl-arr button:focus-visible { outline: 2px solid var(--fl-coral); outline-offset: 2px; }

/* ---------------------------------------------------------------------------
   3. Where to begin (navy)
   --------------------------------------------------------------------------- */

.ip-facelift .ip-fl-begin { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ip-facelift .ip-fl-bc {
  background: #13263a;
  border-radius: var(--fl-r);
  padding: 26px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: #f2efe9;
}
.ip-facelift .ip-fl-n { font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif); font-size: 13px; font-weight: 800; color: var(--fl-teal); }
.ip-facelift .ip-fl-bc h3 { font-size: 20px; letter-spacing: -.015em; line-height: 1.2; margin: 0; color: #f2efe9; }
.ip-facelift .ip-fl-bc p { color: #a9b6c2; font-size: 15px; line-height: 1.55; margin: 0; }
.ip-facelift .ip-fl-bc .ip-fl-lnk { margin-top: auto; padding-top: 8px; }

/* ---------------------------------------------------------------------------
   4. Care that connects (navy)
   --------------------------------------------------------------------------- */

.ip-facelift .ip-fl-circle { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; align-items: center; }
.ip-facelift .ip-fl-pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 28px;
  border-top: 1px solid rgba(169,182,194,.25);
}
.ip-facelift .ip-fl-pillars div { padding: 18px 18px 0 0; }
.ip-facelift .ip-fl-pillars b { font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif); font-size: 15px; display: block; margin-bottom: 4px; }
.ip-facelift .ip-fl-pillars p { font-size: 14px; color: #a9b6c2; line-height: 1.5; margin: 0; }

.ip-facelift .ip-fl-ring { border-radius: calc(var(--fl-r) + 6px); padding: 28px; background: #13263a; }
.ip-facelift .ip-fl-rh {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(169,182,194,.22);
  margin-bottom: 6px;
}
.ip-facelift .ip-fl-av--rh { width: 54px; height: 54px; border-radius: 12px; flex: none; }
.ip-facelift .ip-fl-rh b { font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif); font-size: 17px; display: block; color: #f2efe9; }
.ip-facelift .ip-fl-rh span { font-size: 13px; color: #a9b6c2; }
.ip-facelift .ip-fl-rh em {
  margin-left: auto;
  font-style: normal;
  font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #a9b6c2;
  border: 1px solid rgba(169,182,194,.4);
  border-radius: 6px;
  padding: 3px 7px;
  flex: none;
}
.ip-facelift .ip-fl-cap {
  font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #a9b6c2;
  margin: 14px 0 4px;
}
.ip-facelift .ip-fl-node {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(169,182,194,.16);
  font-size: 15px;
  color: #f2efe9;
  text-decoration: none;
  min-height: 56px;
}
.ip-facelift .ip-fl-node:last-child { border-bottom: 0; }
.ip-facelift .ip-fl-node:hover { background: rgba(47,166,140,.08); }
.ip-facelift .ip-fl-node:focus-visible { outline: 2px solid var(--fl-coral); outline-offset: 2px; }
.ip-facelift .ip-fl-el { color: #7fd6c1; flex: none; }
.ip-facelift .ip-fl-node i {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-style: normal;
  font-weight: 700;
  font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
  font-size: 13px;
  color: var(--fl-navy);
  flex: none;
}
.ip-facelift .ip-fl-nk { font-size: 12.5px; color: #a9b6c2; display: block; }
.ip-facelift .ip-fl-node em { margin-left: auto; font-style: normal; font-size: 12.5px; color: #7fd6c1; white-space: nowrap; }

/* ---------------------------------------------------------------------------
   5. Why InnaPace (cream) and the photo mosaic
   --------------------------------------------------------------------------- */

.ip-facelift .ip-fl-why { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 56px; align-items: start; }
.ip-facelift .ip-fl-body p { color: var(--fl-ink2); line-height: 1.65; margin-bottom: 14px; font-size: 16.5px; }
.ip-facelift .ip-fl-body h3 { font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif); font-size: 22px; margin: 26px 0 6px; letter-spacing: -.015em; }
.ip-facelift .ip-fl-inna { font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif); font-weight: 800; color: var(--fl-teal); }
.ip-facelift .ip-fl-tags { display: flex; gap: 8px; flex-wrap: wrap; margin: 18px 0; }
.ip-facelift .ip-fl-tags .ip-fl-chip { background: #fff; border: 1px solid var(--fl-line); color: var(--fl-navy); }

/* one tall photograph, then four in a two by two grid */
.ip-facelift .ip-fl-photos {
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr;
  grid-template-rows: 250px 250px;
  gap: 12px;
}
.ip-facelift .ip-fl-photos figure { margin: 0; height: 100%; overflow: hidden; border-radius: calc(var(--fl-r) - 2px); background: var(--fl-sage); }
.ip-facelift .ip-fl-photos figure:nth-child(1) { grid-row: span 2; }
/* object-fit:cover is what keeps a photograph at its own ratio in a fixed cell;
   without it the image stretches, which the mobile note calls out by name. */
.ip-facelift .ip-fl-photos img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------------------------------------------------------------------------
   6. Let's work together (white)
   --------------------------------------------------------------------------- */

.ip-facelift .ip-fl-cta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.ip-facelift .ip-fl-cta ul { list-style: none; margin: 20px 0 28px; padding: 0; display: grid; gap: 12px; }
.ip-facelift .ip-fl-cta li { display: flex; gap: 12px; font-size: 16px; line-height: 1.5; color: var(--fl-ink2); }
.ip-facelift .ip-fl-cta li svg { flex: none; margin-top: 3px; }
.ip-facelift .ip-fl-cta li b { color: var(--fl-navy); }
.ip-facelift .ip-fl-ctabtns { display: flex; gap: 10px; flex-wrap: wrap; }
.ip-facelift .ip-fl-pic2 { border-radius: calc(var(--fl-r) + 4px); overflow: hidden; aspect-ratio: 4 / 3; position: relative; }
.ip-facelift .ip-fl-pic2 img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ip-facelift .ip-fl-note {
  position: absolute;
  left: 16px;
  bottom: 16px;
  background: rgba(250,247,242,.94);
  color: var(--fl-navy);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 13.5px;
  max-width: 250px;
  line-height: 1.4;
}
.ip-facelift .ip-fl-note b { font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif); display: block; font-size: 14px; }

/* ---------------------------------------------------------------------------
   7. Questions (sage)
   --------------------------------------------------------------------------- */

.ip-facelift .ip-fl-faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 56px; }
.ip-facelift .ip-fl-qa { border-top: 1px solid var(--fl-line); }
.ip-facelift .ip-fl-qa details { border-bottom: 1px solid var(--fl-line); padding: 20px 0; }
.ip-facelift .ip-fl-qa summary {
  list-style: none;
  cursor: pointer;
  font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
  font-weight: 700;
  font-size: 18px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  letter-spacing: -.01em;
  min-height: 44px;
  align-items: center;
}
.ip-facelift .ip-fl-qa summary::-webkit-details-marker { display: none; }
.ip-facelift .ip-fl-qa summary::after {
  content: "";
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 50%;
  background: var(--fl-sage) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M7 11h8M11 7v8' stroke='%231f7d69' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}
.ip-facelift .ip-fl-qa details[open] summary::after {
  background: var(--fl-teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M7 11h8' stroke='white' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}
.ip-facelift .ip-fl-qa summary:focus-visible { outline: 2px solid var(--fl-coral); outline-offset: 3px; }
.ip-facelift .ip-fl-qa p { color: var(--fl-ink2); line-height: 1.6; margin-top: 10px; font-size: 16px; }
.ip-facelift .ip-fl-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
/* the topic chips come from innapace_topic_pills_html() and carry the live class */
.ip-facelift .ip-fl-chips .answer-chip,
.ip-facelift .ip-fl-chips .ip-fl-chip {
  display: inline-block;
  border-radius: 6px;
  padding: 6px 11px;
  font-size: 12.5px;
  font-weight: 500;
  background: #fff;
  border: 1px solid var(--fl-line);
  color: var(--fl-navy);
  line-height: 1.35;
  text-decoration: none;
  min-height: 34px;
}
.ip-facelift .ip-fl-chips a:hover { border-color: var(--fl-teal); }

/* ---------------------------------------------------------------------------
   8. Footer: spacing and type only. The live footer's blocks and links are
   untouched, which is what the brief says the mockup gets wrong.
   --------------------------------------------------------------------------- */

.ip-facelift .site-footer { padding-top: 64px; padding-bottom: 40px; }
.ip-facelift .site-footer a:focus-visible { outline: 2px solid var(--fl-coral); outline-offset: 2px; }

/* ============================================================================
   HOMEPAGE, MOBILE. Widths built and checked: 360, 390, 414, 768, 844 x 390.
   NO overflow-x clip is added here: the theme already sets html and body to
   overflow-x hidden, measured on the live page, and the only thing that runs
   past the right edge is its own off-canvas nav drawer, which does so
   identically with the facelift off. A second clip would hide real overflow
   rather than fix it.
   ============================================================================ */

@media (max-width: 1100px) {
  .ip-facelift .ip-fl-hero { padding: 0 var(--fl-gutter); }
  .ip-facelift .ip-fl-hero-in { min-height: 0; }
  .ip-facelift .ip-fl-hero-tx { padding: 70px 0 10px; max-width: none; }
  .ip-facelift .ip-fl-wmk { font-size: 200px; top: auto; bottom: 200px; right: -10px; }
  .ip-facelift .ip-fl-pic { position: relative; right: auto; bottom: auto; width: auto; margin: 0 calc(var(--fl-gutter) * -1); max-width: none; }
  .ip-facelift .ip-fl-sec { padding: 64px 0; }
  .ip-facelift .ip-fl-circle,
  .ip-facelift .ip-fl-why,
  .ip-facelift .ip-fl-cta,
  .ip-facelift .ip-fl-faq { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .ip-facelift .ip-fl-pillars { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 980px) {
  .ip-facelift .ip-fl-pc { grid-template-columns: minmax(0, 1fr); }
  .ip-facelift .ip-fl-grid6 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; }
  .ip-facelift .ip-fl-begin { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* one tall photograph, then two per row underneath */
  .ip-facelift .ip-fl-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 200px 200px 200px; }
  .ip-facelift .ip-fl-photos figure:nth-child(1) { grid-column: span 2; grid-row: span 2; }
}

@media (max-width: 767.98px) {
  .ip-facelift .ip-fl-h1 { font-size: clamp(34px, 10.5vw, 48px); }
  /* a long word wraps rather than overflowing, and never breaks mid-word */
  .ip-facelift .ip-fl-h1,
  .ip-facelift .ip-fl-h2,
  .ip-facelift .ip-fl-fc h3,
  .ip-facelift .ip-fl-mini h4 { overflow-wrap: normal; word-break: normal; hyphens: manual; }
  .ip-facelift .ip-fl-lede { font-size: 17px; }

  .ip-facelift .ip-fl-sbox { max-width: none; padding: 16px; }
  /* the field, the icon and the button stay on one line and the placeholder
     ends in an ellipsis rather than mid-letter */
  .ip-facelift .ip-fl-bar { flex-wrap: nowrap; padding-left: 14px; gap: 8px; }
  .ip-facelift .ip-fl-bar .ip-fl-btn { padding: 11px 16px; }
  /* the chips scroll sideways in one tidy row rather than wrapping to a ragged half row */
  .ip-facelift .ip-fl-ch {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: -2px;
    padding-inline: 2px;
  }
  .ip-facelift .ip-fl-ch::-webkit-scrollbar { display: none; }
  .ip-facelift .ip-fl-ch a { flex: 0 0 auto; }

  .ip-facelift .ip-fl-sec { padding: 48px 0; }
  /* one column here, so each card is content-tall: auto rows, no equal-height track to fill
     and therefore no slack to pool inside a card */
  .ip-facelift .ip-fl-facs { grid-template-rows: auto; gap: 14px; }
  .ip-facelift .ip-fl-fm { flex-basis: 120px; min-height: 120px; }
  .ip-facelift .ip-fl-fb { padding: 14px 16px; }
  .ip-facelift .ip-fl-fc h3 { font-size: 20px; }
  /* the team row takes the full width, which drops View facility onto its own line under it
     rather than squeezing both onto one */
  .ip-facelift .ip-fl-foot { flex-wrap: wrap; align-items: flex-start; }
  .ip-facelift .ip-fl-team { flex: 1 1 100%; }
  .ip-facelift .ip-fl-vf { padding-bottom: 0; margin-left: 0; }
  .ip-facelift .ip-fl-av--mini { height: 110px; font-size: 24px; }
  .ip-facelift .ip-fl-grid6 { gap: 12px; }

  .ip-facelift .ip-fl-begin { grid-template-columns: minmax(0, 1fr); }
  .ip-facelift .ip-fl-ring { padding: 18px; }
  .ip-facelift .ip-fl-photos { grid-template-rows: 170px 170px 170px; gap: 10px; }
  .ip-facelift .ip-fl-ctabtns { display: grid; gap: 10px; }
  .ip-facelift .ip-fl-ctabtns .ip-fl-btn { justify-content: center; }
  .ip-facelift .ip-fl-qa summary { font-size: 16px; }
}

/* phone landscape, 844 x 390: short and wide, so the hero must not demand a
   viewport height it does not have. */
@media (max-height: 460px) and (orientation: landscape) {
  .ip-facelift .ip-fl-hero-in { min-height: 0; }
  .ip-facelift .ip-fl-hero-tx { padding: 40px 0 10px; }
  .ip-facelift .ip-fl-wmk { font-size: 180px; }
}
/* ============================================================================
   SECTION 4: Find a Professional.

   The sidebar's controls MOVED into a box under the hero and a drawer; the cards
   themselves are not redesigned. Everything that used to be set !important on the
   pieces being replaced was removed from that template's own inline <style> in
   page-find-a-professional-facelift.php, which is why nothing below needs
   !important either. Each removal is named at the point it was made.

   THE CARD WIDTH. Measured on the live page at a 1924px viewport on 2026-10-09:
   .dir-wrap 1400, rail 244, results column 1060, a two-column grid of 521px cards
   with an 18px gap. 521 is not an intrinsic card width, it is (1060 - 18) / 2.
   Three of them plus two 22px gaps would be 1607px, which does not fit the 1580px
   container section 2 sets. 512 does: 3 x 512 + 2 x 22 = 1580 exactly, which is
   where the brief's own number comes from. So the card ships at 512, nine pixels
   (1.7%) narrower than today, with its markup and its internals untouched.
   ============================================================================ */

.ip-facelift .ipf30 { --fl-card-w: 512px; --fl-card-gap: 22px; }

/* the hero carries the cream band and the box overlaps it */
.ip-facelift .fl-find-hero { position: relative; padding-bottom: 58px; }
.ip-facelift .fl-find-hero .fl-h1 { font-size: clamp(38px, 4.4vw, 68px); margin: 10px 0 10px; }
.ip-facelift .fl-find-area { margin: 0; color: var(--fl-ink-mid); font-size: 16px; }
/* .fl-find-search is gone: that class was on the hero search form. */

/* the filter box, overlapping the hero by about 34px */
/* grid-template-columns and min-width:0 are both required. A grid item's automatic
   minimum size is its MIN-CONTENT size, so the category tab row, whose four buttons
   are wider than a phone, refused to shrink and pushed the box's contents 76px past
   its own right edge at 360, 390 and 414. Measured, not guessed: the box itself read
   w358 L16 while its children read w419 L31. */
.ip-facelift .fl-filterbox {
  grid-template-columns: minmax(0, 1fr);
  position: relative;
  z-index: 3;
  margin: -34px auto 28px;
  max-width: var(--fl-page-max);
  width: calc(100% - (var(--fl-gutter) * 2));
  background: var(--fl-paper);
  border: 1px solid var(--fl-line);
  border-radius: var(--fl-radius-card);
  padding: 18px;
  box-shadow: 0 2px 4px rgba(13, 27, 42, .04), 0 16px 40px rgba(13, 27, 42, .08);
  display: grid;
  gap: 14px;
}

/* category tabs: 6px chips, scrolling sideways rather than wrapping ragged */
.ip-facelift .fl-filterbox > * { min-width: 0; }

.ip-facelift .fl-fb-tabs .ipf-seg {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.ip-facelift .fl-fb-tabs .ipf-seg::-webkit-scrollbar { display: none; }
.ip-facelift .fl-fb-tabs .ipf-seg-btn {
  flex: 0 0 auto;
  min-height: 44px;
  border-radius: var(--fl-radius-chip);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.ip-facelift .fl-fb-selects {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
}
/* the moved controls each arrived wrapped in their own .filter-section */
.ip-facelift .fl-fb-selects .filter-section,
.ip-facelift .fl-fb-selects .fl-fb-field { margin: 0; display: block; min-width: 0; }
.ip-facelift .fl-fb-selects .helper { display: none; }
.ip-facelift .fl-fb-selects .eyebrow,
.ip-facelift .fl-fb-label {
  display: block;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fl-ink-mid);
}
.ip-facelift .fl-fb-selects .fs-input {
  width: 100%;
  min-height: 44px;
  font-size: 16px;      /* 16 minimum, so iPhones do not zoom the page on tap */
  border-radius: var(--fl-radius-chip);
}

.ip-facelift .fl-fb-actions { display: flex; gap: 10px; }
.ip-facelift .fl-fb-actions .find-filters-btn,
.ip-facelift .fl-fb-search {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding-inline: 20px;
}
.ip-facelift .fl-fb-actions .find-filters-btn {
  background: var(--fl-paper);
  border: 1px solid var(--fl-line);
  border-radius: var(--fl-radius-chip);
  color: var(--fl-navy);
  cursor: pointer;
}
.ip-facelift .fl-fb-actions .find-filters-btn:hover { border-color: var(--fl-teal); }

.ip-facelift .fl-fb-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  padding-top: 12px;
  border-top: 1px solid var(--fl-line);
}
.ip-facelift .fl-fb-quick .filter-section { display: contents; }
.ip-facelift .fl-fb-quick .eyebrow { display: none; }
.ip-facelift .fl-fb-quick .fs-check {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
}
.ip-facelift .fl-fb-quick .fs-check label { cursor: pointer; font-size: 14px; }
.ip-facelift .fl-fb-quick .fs-check input { width: 18px; height: 18px; }

/* ---------------------------------------------------------------------------
   The sidebar becomes a drawer at EVERY width.
   The drawer's own script is untouched: it toggles body.find-drawer-open and
   binds #findFiltersOpen by id, which is why that button was moved into the box
   rather than duplicated there.
   --------------------------------------------------------------------------- */

.ip-facelift .ipf30 .dir-wrap {
  display: block;
  max-width: var(--fl-page-max);
  margin-inline: auto;
  padding-inline: var(--fl-gutter);
}

.ip-facelift .ipf30 aside.filters {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(420px, 92vw);
  max-width: none;
  z-index: 1000;
  background: var(--fl-paper);
  border-left: 1px solid var(--fl-line);
  transform: translateX(102%);
  transition: transform .28s ease;
  display: flex;
  flex-direction: column;
  box-shadow: -16px 0 40px rgba(13, 27, 42, .14);
}
@media (prefers-reduced-motion: reduce) {
  .ip-facelift .ipf30 aside.filters { transition: none; }
}
.ip-facelift.find-drawer-open .ipf30 aside.filters { transform: translateX(0); }

.ip-facelift .ipf30 .filters-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--fl-line);
}
.ip-facelift .ipf30 .filters-head h3 { margin: 0; flex: 1 1 auto; font-size: 18px; }
.ip-facelift .ipf30 .find-drawer-close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--fl-line);
  border-radius: var(--fl-radius-chip);
  background: var(--fl-paper);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.ip-facelift .ipf30 .filter-scroll { flex: 1 1 auto; overflow-y: auto; padding: 18px; }

/* the sticky bar the mobile requirements ask for, at every width */
.ip-facelift .ipf30 .filter-actions {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: var(--fl-paper);
  border-top: 1px solid var(--fl-line);
}
.ip-facelift .ipf30 .filter-actions .btn-primary { flex: 1 1 auto; min-height: 44px; }
.ip-facelift .ipf30 .filter-actions .btn-secondary-link { min-height: 44px; display: inline-flex; align-items: center; }

.ip-facelift .ipf30 .find-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(13, 27, 42, .42);
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s ease;
}
.ip-facelift.find-drawer-open .ipf30 .find-drawer-backdrop { opacity: 1; pointer-events: auto; }
.ip-facelift.find-drawer-open { overflow: hidden; }

/* ---------------------------------------------------------------------------
   Results: three cards across at their own width, centred, never stretched.
   --------------------------------------------------------------------------- */

.ip-facelift .ipf30 main.results { width: 100%; }

.ip-facelift .ipf30 .results-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.ip-facelift .ipf30 .fl-results-count { flex: 1 1 auto; }
.ip-facelift .ipf30 .results-row1 { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px; }
.ip-facelift .ipf30 .sort-control select { min-height: 44px; font-size: 16px; border-radius: var(--fl-radius-chip); }

/* The grid is a fixed number of fixed-width tracks, centred. A fractional track
   would let the card stretch to fill the row, which the brief forbids by name. */
.ip-facelift .ipf30 #resultsGrid.grid {
  display: grid;
  grid-template-columns: repeat(3, var(--fl-card-w));
  gap: var(--fl-card-gap);
  justify-content: center;
}
/* 3 cards + 2 gaps + both gutters = 512*3 + 22*2 + 80 = 1660 */
@media (max-width: 1659.98px) {
  .ip-facelift .ipf30 #resultsGrid.grid { grid-template-columns: repeat(2, var(--fl-card-w)); }
}
/* 2 cards + 1 gap + both gutters = 512*2 + 22 + 80 = 1126; the brief says about 1100 */
@media (max-width: 1125.98px) {
  .ip-facelift .ipf30 #resultsGrid.grid { grid-template-columns: minmax(0, var(--fl-card-w)); }
}
/* below the card's own width it becomes fluid, so it can never be wider than the screen */
@media (max-width: 591.98px) {
  .ip-facelift .ipf30 #resultsGrid.grid { grid-template-columns: minmax(0, 1fr); }
}

.ip-facelift .ipf30 .ipfc-legend { justify-content: flex-end; }

/* pagination tap targets */
.ip-facelift .ipf30 .page-numbers {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--fl-radius-chip);
}

.ip-facelift .ipf30 .find-suggest-block { border-radius: var(--fl-radius-card); background: var(--fl-sage); }

/* ---------------------------------------------------------------------------
   Find, mobile
   --------------------------------------------------------------------------- */

@media (max-width: 1100px) {
  .ip-facelift .fl-fb-selects { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
  .ip-facelift .fl-find-hero { padding-bottom: 46px; }
  .ip-facelift .fl-filterbox { padding: 14px; margin-bottom: 22px; }
  /* the four selects stack full width, Filters and Search side by side underneath */
  .ip-facelift .fl-fb-selects { grid-template-columns: minmax(0, 1fr); }
  .ip-facelift .fl-fb-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .ip-facelift .fl-fb-quick { gap: 4px 14px; }

  .ip-facelift .ipf30 .search-bar button { white-space: nowrap; min-height: 44px; }

  .ip-facelift .ipf30 aside.filters { width: 100vw; border-left: 0; }
  .ip-facelift .ipf30 .results-row1 { flex-direction: column; align-items: stretch; }
  .ip-facelift .ipf30 .sort-control { display: flex; align-items: center; gap: 8px; }
  .ip-facelift .ipf30 .sort-control select { flex: 1 1 auto; width: 100%; }

  /* one card per row, the same shape as today, scaled */
  .ip-facelift .ipf30 #resultsGrid .ipfc-top { grid-template-columns: 120px minmax(0, 1fr); gap: 12px; }
  .ip-facelift .ipf30 #resultsGrid .ipfc-nm { font-size: 17px; overflow-wrap: normal; }
  .ip-facelift .ipf30 #resultsGrid .ipfc-role { overflow-wrap: normal; }
  .ip-facelift .ipf30 #resultsGrid .ipfc-foot { flex-wrap: nowrap; }
  .ip-facelift .ipf30 #resultsGrid .ipfc-avail,
  .ip-facelift .ipf30 #resultsGrid .ipfc-view { white-space: nowrap; }
}

/* Find: the left of the sort row was hidden while it was empty. It now carries either the
   city chips or the active-filter bar, so it is shown again and takes the space, with Sort by
   staying on the right. */
/* flex-basis 0, not auto: with `auto` the bar claims its full content width, which pushed
   Sort by onto a second line once four filter chips were active. At 0 it shares the row
   and the chips wrap inside it, which is where wrapping belongs. */
.ip-facelift .ipf30 .fl-results-count { display: block; flex: 1 1 0; min-width: 0; }
.ip-facelift .ipf30 .results-row1 > .sort-control { flex: none; }
.ip-facelift .ipf30 .fl-results-count:empty { display: none; }
.ip-facelift .ipf30 .results-row1 { justify-content: space-between; align-items: center; }
.ip-facelift .ipf30 .results-head { margin-bottom: 10px; }

/* innapace.css gives #page-home-content its own bottom padding, which left a 190px
   strip of cream between the sage FAQ band and the footer. The bands now own their
   own vertical rhythm, so the wrapper's padding goes. */
.ip-facelift #page-home-content { padding-bottom: 0; }
.ip-facelift #page-home-content .fl-faq { margin-bottom: 0; }

/* The hero search field, at EVERY width. It was 14.5px below 600 and 15px above it, and a
   phone held sideways is 844px wide and still a phone: iOS zooms the page on tap under 16. */
.ip-facelift .ipf30 .search-bar input { font-size: 16px; }

/* ----------------------------------------------------------------------------
   Find, phone: two corrections measured on a 390px capture.
   ---------------------------------------------------------------------------- */

/* 1. The hero search bar wrapped onto three lines, icon above input above button.
      innapace.css constrains it at 600px and the pieces had no flex basis of their own. */
@media (max-width: 767.98px) {
  .ip-facelift .ipf30 .hero .search-bar,
  .ip-facelift .ipf30 .search-bar {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  .ip-facelift .ipf30 .search-bar > svg { flex: 0 0 auto; }
  .ip-facelift .ipf30 .search-bar input {
    flex: 1 1 auto;
    min-width: 0;
    /* a clipped placeholder ends in an ellipsis rather than mid-letter */
    text-overflow: ellipsis;
  }
  .ip-facelift .ipf30 .search-bar button { flex: 0 0 auto; white-space: nowrap; }

  /* 2. The card keeps today's shape, scaled: photo beside the text, not above it. */
  .ip-facelift .ipf30 #resultsGrid .ipfc-top { grid-template-columns: 120px minmax(0, 1fr); gap: 12px; }
  .ip-facelift .ipf30 #resultsGrid .ipfc-ph { width: 120px; height: 174px; }
}

/* The mobile block that stood here fixed the hero search bar: its flex direction, the
   hero padding under it, and its side margins. Two more !important declarations, both
   gone with the bar. The hero now holds a title and a photograph and needs none of it. */

/* The Find hero search bar block that stood here is gone with the bar itself. It held
   two of this sheet's !important declarations, both of which existed only to beat the
   999px pill radius that innapace.css and innapace-find-v2.css force on that element.
   No element, no rule, no override. */
/* ============================================================================
   CARD PHOTOS AND CHIPS
   Briefs CODE-innapace-carousel-cards-bigger-photos and
   CODE-innapace-chips-larger-and-clickable, both 2026-10-09.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   Crop from the TOP, everywhere a person is shown.

   object-fit:cover crops equally from both edges by default, which takes the
   top off a head in a short frame: Chris Cadaret's face was gone entirely.
   center top keeps the face in frame. Applied to the carousel's six cards, the
   facility card's team thumbnails and the Find result cards. The Find card's
   shape and size are NOT touched, only where its crop sits.
   --------------------------------------------------------------------------- */

.ip-facelift .ip-fl-av img,
.ip-facelift .ip-fl-av--mini img,
.ip-facelift .ip-fl-av--tm img,
.ip-facelift .ipf30 #resultsGrid .ipfc-ph img {
  object-fit: cover;
  object-position: center top;
}

/* the mini card's text block sits under the photograph and takes only the room it needs */
.ip-facelift .ip-fl-mini { padding: 0 0 12px; gap: 0; overflow: hidden; }
.ip-facelift .ip-fl-mini-tx { padding: 12px 14px 0; display: flex; flex-direction: column; gap: 6px; }
.ip-facelift .ip-fl-mini h4 { font-size: 17px; line-height: 1.2; }
.ip-facelift .ip-fl-mini-city { font-size: 13.5px; color: var(--fl-ink2); margin: 0; }
.ip-facelift .ip-fl-mini-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.ip-facelift .ip-fl-mini-chips .ip-fl-chip { font-size: 12px; padding: 3px 8px; min-height: 0; }
.ip-facelift .ip-fl-chip--cat  { background: var(--fl-navy); color: var(--fl-cream); }
.ip-facelift .ip-fl-chip--cult { background: var(--fl-sage); color: var(--fl-tealD); }
.ip-facelift .ip-fl-chip--lang { background: #fdeee3; color: var(--fl-coralD); }

/* ---------------------------------------------------------------------------
   The community tags and the topic chips: large enough to read and to tap, and
   a link only when a public listing sits behind them.
   --------------------------------------------------------------------------- */

.ip-facelift .ip-fl-tags .ip-fl-chip,
.ip-facelift .ip-fl-chips .ip-fl-chip {
  font-family: var(--font-sans, 'Fira Sans', sans-serif);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  padding: 8px 14px;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  border-radius: 6px;          /* Tag and Chip System v1, tier 2 */
  text-decoration: none;
}

/* nobody behind it: it stays on the page, quietly, and is not a link */
.ip-facelift .ip-fl-chip--quiet {
  background: #f1ede6;
  border: 1px solid var(--fl-line);
  color: #7d7568;
  cursor: default;
}
.ip-facelift .ip-fl-tS .ip-fl-chip--quiet { background: #dde7df; border-color: #cbd9ce; }

/* someone behind it: it reads as clickable and says so on focus */
.ip-facelift .ip-fl-chip--live {
  background: #fff;
  border: 1.5px solid var(--fl-teal);
  color: var(--fl-tealD);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.ip-facelift .ip-fl-chip--live:hover { background: var(--fl-teal); color: #fff; }
@media (prefers-reduced-motion: reduce) { .ip-facelift .ip-fl-chip--live { transition: none; } }
.ip-facelift .ip-fl-chip--live:focus-visible { outline: 2px solid var(--fl-coral); outline-offset: 2px; }

@media (max-width: 767.98px) {
  /* 44px tap targets on a phone, and the rows keep breathing room between them */
  .ip-facelift .ip-fl-tags,
  .ip-facelift .ip-fl-chips { gap: 8px; }
  .ip-facelift .ip-fl-tags .ip-fl-chip,
  .ip-facelift .ip-fl-chips .ip-fl-chip { min-height: 44px; padding: 10px 14px; }
}
@media (max-width: 399.98px) {
  .ip-facelift .ip-fl-tags .ip-fl-chip,
  .ip-facelift .ip-fl-chips .ip-fl-chip { font-size: 13px; padding: 10px 12px; }
}

/* ============================================================================
   FACELIFT PART 2: About, Community, Resources, For Practitioners
   Brief: CODE-innapace-facelift-other-pages-2026-10-09.

   These four are RESTYLED IN PLACE, with no second template. Their markup
   carries clean, distinctive class names and almost no !important (eight in
   For Practitioners, none in the other three), so there is nothing to fight,
   nothing to copy and nothing that can drift from the live file.

   WORDING IS UNTOUCHED on all four. The brief says the live copy wins wherever
   the mockup differs, so not one word is changed here; only the look moves.

   The fade needs a span to live on. About, Community and For Practitioners
   already wrap the second phrase of their titles in <span class="t">, so the
   fade lands with no markup change. RESOURCES HAS NO SUCH SPANS, so its titles
   are styled but not faded, and that is reported rather than papered over by
   editing the template.
   ============================================================================ */

.ip-facelift .page,
.ip-facelift main.page { background: var(--fl-cream); }

/* width and gutters, the same 1580 the homepage uses */
.ip-facelift .page > section > .wrap,
.ip-facelift .page > section > .inner,
.ip-facelift .page .r-across-inner,
.ip-facelift section.page > .wrap {
  max-width: var(--fl-page-max);
  margin-inline: auto;
  padding-inline: var(--fl-gutter);
}

/* type */
.ip-facelift .page h1,
.ip-facelift .page h2,
.ip-facelift .page h3,
.ip-facelift .page h4 { font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif); }
.ip-facelift .page h2,
.ip-facelift .page .h2 { font-weight: 800; letter-spacing: -.03em; line-height: 1.05; }
.ip-facelift .page p,
.ip-facelift .page li { font-family: var(--font-sans, 'Fira Sans', sans-serif); }

/* the eyebrow, same dot-and-caps as the homepage */
.ip-facelift .page .eyebrow,
.ip-facelift .page .track-eyebrow {
  font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--fl-tealD);
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.ip-facelift .page .eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* the fade on the second phrase, wherever the markup already marks one */
.ip-facelift .page .t {
  background-image: var(--fl-g, var(--fl-grad));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
  .ip-facelift .page .t { background-image: none; -webkit-text-fill-color: currentColor; color: var(--fl-tealD); }
}
@media (prefers-contrast: more) {
  .ip-facelift .page .t { background-image: none; -webkit-text-fill-color: currentColor; color: inherit; }
}

/* cards 12px, chips 6px, buttons keep their pill */
.ip-facelift .page .card,
.ip-facelift .page .blk,
.ip-facelift .page .ccard,
.ip-facelift .page .ecard,
.ip-facelift .page .icard,
.ip-facelift .page .fit,
.ip-facelift .page .darkcard,
.ip-facelift .page .track-card,
.ip-facelift .page .r-community { border-radius: var(--fl-r); }
.ip-facelift .page .chip,
.ip-facelift .page .tag,
.ip-facelift .page .k { border-radius: 6px; }
.ip-facelift .page .btn { border-radius: 999px; min-height: 44px; display: inline-flex; align-items: center; }

/* no accent bars or rails on any card or callout, the standing rule */
.ip-facelift .page .card,
.ip-facelift .page .blk,
.ip-facelift .page .ccard,
.ip-facelift .page .ecard,
.ip-facelift .page .fit { border-left: 0; border-inline-start: 0; }

/* ---------------------------------------------------------------------------
   The bands, navy anchored.

   EVERY RULE CARRIES THE PAGE'S OWN ID. Each template wraps itself in one
   (#about, #comm, #prac, #page-resources) and colours its sections through it:
   `#about .stands { background: var(--mint) }` is (1,1,0) and beat a
   four-class selector of mine outright. Measured in the browser, not assumed.

   WHERE NAVY GOES IS DECIDED BY THE MARKUP, NOT BY A PATTERN. Several of these
   sections set `color` in a style ATTRIBUTE on their own paragraphs, which no
   stylesheet rule can beat without !important. Painting one of those navy left
   body text at a contrast ratio of 1.87 against the band, far under AA, and it
   was unreadable. So navy is used only on sections that carry no inline colour
   and can therefore inherit a light one:

       About                s2 only   (s3, s4, s5 all set colour inline)
       Community            s2, and s4 which the page already paints navy itself
       For Practitioners    s2 only   (s3 sets colour inline)
       Resources            none      (two sections; the brief caps it at two)

   The hero is never a band: each page opens with a dark image hero that paints
   its own gradient and writes white on it, so :nth-of-type(1) is left alone.
   --------------------------------------------------------------------------- */

/* NO BLANKET DEFAULT, and that is deliberate.
   A catch-all `section:not(:nth-of-type(1)):not(.involve)` is (1,3,1), which quietly OUTRANKED
   the (1,2,1) rules naming each band, so Community's navy and its sage both lost to the default
   that was meant to sit under them. Every band is named explicitly at one flat specificity now,
   and a section nobody names keeps whatever the page already gives it. Nothing is painted blind.

   The heroes are named nowhere, so each keeps its own dark gradient. Community's .involve is
   named nowhere either: the page already paints it navy and writes cream on it, and repainting
   it cream left cream text on a cream band. Both were caught on the deployed preview. */

/* ---- navy ---- */
.ip-facelift #about > section:nth-of-type(2),
.ip-facelift #comm  > section:nth-of-type(2) {
  background: var(--fl-navy);
  color: #f2efe9;
  --fl-g: var(--fl-gradDk);
}
.ip-facelift #about > section:nth-of-type(2) h2, .ip-facelift #about > section:nth-of-type(2) h3, .ip-facelift #about > section:nth-of-type(2) h4,
.ip-facelift #comm  > section:nth-of-type(2) h2, .ip-facelift #comm  > section:nth-of-type(2) h3, .ip-facelift #comm  > section:nth-of-type(2) h4 { color: #f2efe9; }
.ip-facelift #about > section:nth-of-type(2) p, .ip-facelift #about > section:nth-of-type(2) li,
.ip-facelift #comm  > section:nth-of-type(2) p, .ip-facelift #comm  > section:nth-of-type(2) li { color: #a9b6c2; }
.ip-facelift #about > section:nth-of-type(2) .eyebrow,
.ip-facelift #comm  > section:nth-of-type(2) .eyebrow { color: var(--fl-coral); }

/* FOR PRACTITIONERS GETS NO NAVY BAND, and that is a decision, not an oversight.
   Its only two candidates, sections 2 and 6, carry `background:#fff` in a style ATTRIBUTE,
   which nothing but !important can beat. Forcing them navy and then re-lighting every line
   inside is the exact pattern that produced three unreadable bands tonight before being caught.
   The page keeps cream, white and sage, which is still the system. Reported plainly.

   About's .blk is likewise NOT a light card: it is transparent and sits directly on the navy
   band, and treating it as one painted navy text onto navy at a contrast of 1.00. */

/* ---- cream ---- */
.ip-facelift #about > section:nth-of-type(3),
.ip-facelift #about > section:nth-of-type(4),
.ip-facelift #comm  > section:nth-of-type(3),
.ip-facelift #prac  > section:nth-of-type(3),
.ip-facelift #prac  > section:nth-of-type(4) { background: var(--fl-cream); color: var(--fl-navy); }

/* ---- white ----
   About's fifth section carries style="background:var(--mint)" as an ATTRIBUTE, which no
   stylesheet rule can beat without !important. Left alone it sat mint directly above the sage
   closing band, two near-identical colours touching, which reads as a mistake rather than a
   rhythm. This is the sixth and last !important in this sheet and the only one whose opponent
   is an inline style. */
.ip-facelift #about > section:nth-of-type(5) { background: #fff !important; color: var(--fl-navy); }
/* For Practitioners has EIGHT sections, not the seven the template reads as: the concierge
   block (.ipcx-sec) is rendered conditionally and sits between the steps and the FAQ. Counted
   off the live DOM, not the template. */
.ip-facelift #prac  > section:nth-of-type(5),
.ip-facelift #prac  > section:nth-of-type(6),
.ip-facelift #prac  > section:nth-of-type(7) { background: #fff; color: var(--fl-navy); }

/* ---- sage, the closing band ---- */
.ip-facelift #about > section.closeab,
.ip-facelift #comm  > section.closec,
.ip-facelift #prac  > section:nth-of-type(8),
.ip-facelift #page-resources section.resources-articles { background: var(--fl-sage); color: var(--fl-navy); }

/* Resources: two sections, so no navy at all, inside the brief's cap of two. Its headings carry
   no second-phrase span, so they are styled but NOT faded. Reported rather than fixed by editing
   a template this pass is not supposed to touch. */
.ip-facelift #page-resources { background: var(--fl-cream); }

/* A CARD IS NOT THE BAND IT SITS ON.
   The navy rules above colour p, li and headings light, and they reach into any card inside
   that section. Community's .ccard is white, so eighteen lines came out cream-on-white at a
   contrast of 1.15 and were invisible. Every light card on a navy band restores dark text; the
   dark ones keep the light text they are built for. Measured, not guessed: the white card was
   found by walking the band's descendants for a light background. */
.ip-facelift #comm  > section:nth-of-type(2) .ccard,
.ip-facelift #comm  > section:nth-of-type(2) .ccard h2,
.ip-facelift #comm  > section:nth-of-type(2) .ccard h3,
.ip-facelift #comm  > section:nth-of-type(2) .ccard h4,
.ip-facelift #comm  > section:nth-of-type(2) .ccard p,
.ip-facelift #comm  > section:nth-of-type(2) .ccard li,
.ip-facelift #comm  > section:nth-of-type(2) .ccard a { color: var(--fl-tealD); }

/* a dark card on a navy band keeps its own darker colour rather than vanishing into it */
.ip-facelift #about .darkcard { background: #13263a; }
.ip-facelift #about .darkcard p,
.ip-facelift #about .darkcard h2,
.ip-facelift #about .darkcard h3 { color: var(--fl-cream); }
.ip-facelift #comm .icard { background: rgba(255, 255, 255, .05); }

/* ---------------------------------------------------------------------------
   Part 2, mobile. Same requirements as the homepage: no horizontal scroll at
   360, 390, 414, 768 and 844 x 390; inputs at least 16px; 44px tap targets.
   --------------------------------------------------------------------------- */

@media (max-width: 767.98px) {
  /* was overflow-wrap: break-word. That is the rule that beat the site-wide
     heading rule: (0,2,1) against (0,1,1), and only below 768, which is why the
     two h2 failures showed at 360 and 414 and nowhere else. */
  .ip-facelift .page h1,
  .ip-facelift .page h2 { overflow-wrap: normal; word-break: normal; hyphens: manual; }
  .ip-facelift .page input[type="text"],
  .ip-facelift .page input[type="email"],
  .ip-facelift .page input[type="search"],
  .ip-facelift .page select,
  .ip-facelift .page textarea { font-size: 16px; }
  .ip-facelift .page .btn,
  .ip-facelift .page a.btn { min-height: 44px; }
  /* The three controls on For Practitioners that were under 44px on a phone: the Monthly and
     Annual pricing toggle at 34px and the modal close at 22px. Three before the facelift and
     three after, so they are not something this pass introduced, but the mobile requirement
     asks for 44 and giving them 44 changes no behaviour: same buttons, same handlers, same
     destinations. */
  /* .ippm-x is NOT inside .page: the modal is appended to the body, so scoping it to .page
     left it at 22px. Found by re-measuring after the fix rather than assuming it had landed. */
  .ip-facelift .page .seg,
  .ip-facelift .ippm-x {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .ip-facelift .page img { max-width: 100%; height: auto; }
}

/* ============================================================================
   LEGIBILITY, parts 2 and 3
   Brief: CODE-innapace-other-pages-legibility-fix-2026-10-09, which says to do
   this before anything else on these pages.

   I HAVE TO OWN THE MISS. My earlier contrast pass reported zero regressions on
   these four pages. It was true of what it measured and blind to what Marq was
   looking at: the probe skipped every element whose -webkit-text-fill-color is
   transparent, which is every faded title, and skipped everything over a
   background-image, which is every photo hero. Those two exclusions are exactly
   where the unreadable text was. Measured properly below, with numbers.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. The fade must contrast at BOTH ends, on the background it is actually on.

   Measured against the three light backgrounds this site uses:
       #2fa68c (teal)   cream 2.83  white 3.02  sage 2.58   <- fails 3:1
       #1f7d69 (tealD)  cream 4.68  white 5.01  sage 4.28   <- passes
   The brief names "navy into tealD into teal". Ending at teal measures 2.58 on
   sage, under the 3:1 the same brief sets for headings, so the light fade ends
   at tealD instead. Same hue, darker. Deviation reported rather than taken.

   On navy, cream/teal/coral measure 16.28 / 5.76 / 5.99, so the dark fade is
   unchanged.
   --------------------------------------------------------------------------- */

.ip-facelift {
  --fl-grad:   linear-gradient(92deg, #0d1b2a 0%, #23806c 55%, #1f7d69 100%);
  --fl-gradDk: linear-gradient(92deg, #faf7f2 0%, #2fa68c 55%, #e57b3f 100%);
}

/* A SECTION THE PAGE ITSELF PAINTS DARK STILL NEEDS THE DARK FADE.
   Community's .involve is navy by its own stylesheet. It was inheriting the
   light fade, so "There is a place for" started at navy ON navy: a measured
   contrast of 1.00, invisible, which is the exact thing Marq reported. */
.ip-facelift #comm > section.involve { --fl-g: var(--fl-gradDk); }
.ip-facelift #comm > section.involve .eyebrow { color: var(--fl-coral); }

/* ---------------------------------------------------------------------------
   2. Sizes match the homepage.
   Measured before: About h1 46px, Community 44px, For Practitioners 46px,
   against the homepage hero's clamp(48px, 5.4vw, 92px). Section titles were a
   flat 36px against the homepage's clamp(36px, 3.6vw, 60px).
   --------------------------------------------------------------------------- */

.ip-facelift #about .ah h1,
.ip-facelift #comm  .chero h1,
.ip-facelift #prac  .ph h1,
.ip-facelift #page-resources h1 {
  font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
  font-weight: 800;
  font-size: clamp(40px, 5.4vw, 92px);
  line-height: .98;
  letter-spacing: -.045em;
}
.ip-facelift .page h2,
.ip-facelift .page .h2 { font-size: clamp(32px, 3.6vw, 60px); }
.ip-facelift .page p,
.ip-facelift .page li { font-size: 17px; line-height: 1.62; }
.ip-facelift .page h3,
.ip-facelift .page .ccard h3,
.ip-facelift .page .ecard h3,
.ip-facelift .page .icard h3 { font-size: 19px; line-height: 1.25; }

@media (max-width: 767.98px) {
  .ip-facelift .page p,
  .ip-facelift .page li { font-size: 16px; }
  .ip-facelift #about .ah h1,
  .ip-facelift #comm  .chero h1,
  .ip-facelift #prac  .ph h1,
  .ip-facelift #page-resources h1 { font-size: clamp(34px, 10.5vw, 48px); }
  .ip-facelift .page h2,
  .ip-facelift .page .h2 { font-size: clamp(28px, 8vw, 36px); }
}

/* ---------------------------------------------------------------------------
   3. Text over a photo hero.
   The brief says darken the overlay behind the text until it passes, and do not
   touch the image. A scrim is added behind the text column only, so the
   photograph itself is untouched and only what sits under the words changes.
   --------------------------------------------------------------------------- */

.ip-facelift #about .ah,
.ip-facelift #comm  .chero,
.ip-facelift #prac  .ph { position: relative; }

.ip-facelift #about .ah > .wrap,
.ip-facelift #comm  .chero > .wrap,
.ip-facelift #prac  .ph > .wrap { position: relative; z-index: 2; }

/* the hero's own eyebrow and body, at the ratios the brief sets */
.ip-facelift #about .ah .eyebrow,
.ip-facelift #comm  .chero .eyebrow { color: #f2b58c; }
.ip-facelift #about .ah p,
.ip-facelift #comm  .chero p { color: rgba(250, 247, 242, .92); }

/* ============================================================================
   FIND: the keyword field, and the sort bar that was empty.
   Briefs 2026-10-09 "move the hero search into the filter panel" and
   "use the empty sort bar, plus two fixes".
   ============================================================================ */

/* ---- the keyword field, filling the gap between Filters and Search --------- */
.ip-facelift .fl-fb-actions { display: flex; gap: 10px; align-items: stretch; }
.ip-facelift .fl-fb-kw {
  flex: 1 1 auto;        /* this is the empty space the brief asks it to fill */
  min-width: 0;          /* without this the field refuses to shrink below its
                            min-content width and pushes Search off the row */
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  min-height: 44px;
  background: var(--fl-paper);
  border: 1px solid var(--fl-line);
  border-radius: var(--fl-radius-chip);   /* the same 6px the selects above use */
}
.ip-facelift .fl-fb-kw:focus-within { border-color: var(--fl-teal); }
/* flex:none, not width: a flex item with an intrinsic aspect ratio shrinks
   before the line wraps, which squashes the magnifier into an oval */
.ip-facelift .fl-fb-kw > svg { flex: none; color: var(--fl-ink-mid); }
.ip-facelift .fl-fb-kw input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  outline: none;
  padding: 0;
  font: inherit;
  font-size: 16px;       /* 16 minimum, so iPhones do not zoom the page on tap */
  line-height: 42px;
  color: var(--fl-navy);
}
.ip-facelift .fl-fb-kw input::placeholder { color: var(--fl-ink-mid); opacity: 1; }

/* ---- brief D item 4: one baseline across the four selects ------------------
   All four controls now arrive in the same .filter-section wrapper, so the
   alignment is structural rather than corrected afterwards. These two rules
   remove what the rail's own styling brought with it: the divider above each
   section, and a label that was free to be one or two lines tall. */
.ip-facelift .fl-fb-selects .filter-section {
  border: 0;
  border-top: 0;
  padding: 0;
}
.ip-facelift .fl-fb-selects .filter-section > .eyebrow {
  min-height: 16px;
  line-height: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- the sort bar, state one: cities that actually have listings ----------- */
.ip-facelift .fl-citybar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}
/* display:contents so every chip is a flex item of the bar itself and the row
   wraps as one list instead of the whole group dropping to a new line */
.ip-facelift .fl-citybar-chips { display: contents; }
.ip-facelift .fl-citybar-lb {
  font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fl-ink-mid);
}
/* Tag and Chip v1 interactive, at the larger homepage size the brief names */
.ip-facelift .fl-citybar .ip-fl-chip,
.ip-facelift .fl-filterbar .ip-fl-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  min-height: 36px;
  padding: 6px 12px;
  text-decoration: none;
}
.ip-facelift .fl-citymore {
  border: 1px solid var(--fl-line);
  background: var(--fl-paper);
  color: var(--fl-navy);
  cursor: pointer;
  font: inherit;
  font-size: 14px;
}
.ip-facelift .fl-citymore:hover { border-color: var(--fl-teal); }
/* Five on desktop, three on mobile. The same markup serves both: CSS decides how
   many are visible, so the "+N more" label cannot disagree with what is hidden. */
.ip-facelift .fl-citybar-chips > a:nth-child(n+6) { display: none; }
.ip-facelift .fl-citybar.is-open .fl-citybar-chips > a { display: inline-flex; }
.ip-facelift .fl-citybar.is-open .fl-citymore { display: none; }
.ip-facelift .fl-cm-m { display: none; }
/* One button serves both widths, so it hides at the width whose own hidden count is 0.
   Scoped through .fl-citybar on purpose: the chip sizing rule above is (0,3,0) and a
   (0,2,0) hide loses to it, which left the toggle on screen at desktop reading the
   MOBILE count. Same specificity, declared later, so this wins. */
.ip-facelift .fl-citybar .fl-citymore--nodesktop { display: none; }

/* ---- the sort bar, state two: what is filtered right now ------------------- */
.ip-facelift .fl-filterbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}
.ip-facelift .fl-fbar-chips { display: contents; }
.ip-facelift .fl-fbar-count { font-weight: 700; color: var(--fl-navy); font-size: 15px; }
.ip-facelift .fl-fbar-dot { color: var(--fl-ink-mid); }
.ip-facelift .fl-fbar-chip svg { flex: none; }
.ip-facelift .fl-fbar-clear {
  font-size: 14px;
  color: var(--fl-tealD);
  text-decoration: underline;
  text-underline-offset: 3px;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
}
.ip-facelift .fl-fbar-clear:hover { color: var(--fl-navy); }

@media (max-width: 767.98px) {
  /* Brief C item 4: the keyword goes to the top of the panel at full width with
     Search directly under it, both visible without opening Filters.
     display:contents lifts the three controls out of their row so they can be
     ordered among the panel's own children; the panel is a one-column grid, so
     each of them is full width by default. */
  .ip-facelift .fl-fb-actions { display: contents; }
  .ip-facelift .fl-fb-kw { order: 1; }
  .ip-facelift .fl-fb-search { order: 2; width: 100%; }
  .ip-facelift .fl-fb-selects { order: 3; }
  .ip-facelift .fl-fb-actions .find-filters-btn { order: 4; width: 100%; }
  .ip-facelift .fl-fb-quick { order: 5; }

  /* three city chips, not five, and 44px of tap spacing between them */
  .ip-facelift .fl-citybar-chips > a:nth-child(n+4) { display: none; }
  .ip-facelift .fl-citybar.is-open .fl-citybar-chips > a { display: inline-flex; }
  .ip-facelift .fl-citybar,
  .ip-facelift .fl-filterbar { gap: 10px; }
  .ip-facelift .fl-citybar .ip-fl-chip,
  .ip-facelift .fl-filterbar .ip-fl-chip { min-height: 44px; padding: 8px 14px; }
  .ip-facelift .fl-cm-d { display: none; }
  .ip-facelift .fl-cm-m { display: inline; }
  .ip-facelift .fl-citybar .fl-citymore--nodesktop { display: inline-flex; }
  .ip-facelift .fl-citybar .fl-citymore--nomobile { display: none; }
  /* the sort row stacks, so the bar gets its own line rather than being squeezed */
  .ip-facelift .ipf30 .results-row1 { flex-wrap: wrap; }
  .ip-facelift .ipf30 .fl-results-count { flex: 1 1 100%; }
}

/* ===========================================================================
   ROUND 2 (CODE-innapace-preview-feedback-round2-2026-10-10), items 1 to 4.
   Everything here is inside .ip-facelift, so the live site is untouched until
   the switch is flipped.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. ONE HERO TYPE STANDARD ON EVERY PAGE.

   !important is used here, and it is not laziness. Measured with
   CSS.getMatchedStylesForNode on the real pages, the page templates set their
   own hero size with !important already:
     #comm .chero h1          font-size: clamp(30px,4.4vw,44px) !important  (twice)
     #page-resources .r-hero h1  font-size: clamp(40px,5vw,56px) !important
   and the language pages carry an INLINE style="font-size:clamp(2rem,4vw,3rem)".
   No selector, however specific, beats !important or an inline style. That is
   why Community's hero measured 44px while About's measured 77.76px from the
   same rule: the rule matched and lost.
   --------------------------------------------------------------------------- */

.ip-facelift #about .ah h1,
.ip-facelift #comm  .chero h1,
.ip-facelift #prac  .ph h1,
.ip-facelift #page-resources h1,
.ip-facelift #page-contact .c-hero h1,
.ip-facelift #page-understanding .u-hero h1,
.ip-facelift .iporg > div > h1,
.ip-facelift section > .container-narrow > h1 {
  font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif) !important;
  font-weight: 800 !important;
  font-size: clamp(40px, 5.4vw, 92px) !important;
  line-height: .98 !important;
  letter-spacing: -.045em !important;
  /* Stops a hero ending on a lone word at 390. Measured before adding it, seven of the
     sixteen did: Community, Understanding, For organizations, and four language pages.
     This is the systemic fix rather than putting non-breaking spaces into page copy,
     which on a language page is somebody's own wording. A browser without text-wrap
     simply wraps as it does today. */
  text-wrap: balance;
}

/* The accent phrase. Coral on the dark heroes, the teal fade on the light ones,
   which is what About does. Contact and Understanding mark their accent with
   <em>, not a span, so the italic is turned off: it is an accent, not emphasis. */
.ip-facelift #about .ah h1 .c,
.ip-facelift #comm  .chero h1 .c {
  color: var(--fl-coral);
  -webkit-text-fill-color: currentColor;
}
.ip-facelift #page-resources h1 .accent,
.ip-facelift #page-contact .c-hero h1 em,
.ip-facelift #page-understanding .u-hero h1 em {
  font-style: normal;
  background-image: var(--fl-g, var(--fl-grad));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
/* a browser without background-clip:text gets readable text, never invisible text */
@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
  .ip-facelift #page-resources h1 .accent,
  .ip-facelift #page-contact .c-hero h1 em,
  .ip-facelift #page-understanding .u-hero h1 em {
    -webkit-text-fill-color: currentColor;
    color: var(--fl-tealD);
  }
}

/* The one exception. "Understanding our professionals." is naturally two lines,
   "Understanding our / professionals.", with the accent phrase on its own line, which is
   the same shape as About's "Rooted in culture. / Open to all." Balance splits it into
   three short lines instead, so this hero keeps the orphan-only treatment. Measured, not
   assumed: balance gave it 3 lines ending on "our". */
.ip-facelift #page-understanding .u-hero h1 { text-wrap: pretty; }

@media (max-width: 767.98px) {
  .ip-facelift #about .ah h1,
  .ip-facelift #comm  .chero h1,
  .ip-facelift #prac  .ph h1,
  .ip-facelift #page-resources h1,
  .ip-facelift #page-contact .c-hero h1,
  .ip-facelift #page-understanding .u-hero h1,
  .ip-facelift .iporg > div > h1,
  .ip-facelift section > .container-narrow > h1 {
    font-size: clamp(34px, 10.5vw, 48px) !important;
  }
}

/* ---------------------------------------------------------------------------
   2. ABOUT HERO: NOT FIXABLE IN CSS, AND HERE IS THE ARITHMETIC.

   The picture is a CSS background, so the lever is background-position, not
   object-position. But measured at 1440: the source file is 1200x800 and the
   panel is 634x520. background-size:cover therefore scales by HEIGHT
   (520/800 = 0.65), giving 780x520, which is 146px of horizontal overflow and
   ZERO vertical overflow. The full height of the photograph is already on
   screen, so there is no hidden headroom for any vertical position to reveal,
   and `center 0%` is a no-op at this width. Looking at the file confirms it:
   the man's hair nearly touches the top edge of the photograph itself.

   Giving him space above his head needs a wider crop taken from the camera
   original, or a different photograph. The brief says not to edit the image
   file, so this is reported rather than bodged: shrinking background-size to
   fake headroom would just show a strip of panel colour above him.

   The rule is kept because it IS correct above about 1773px viewport width,
   where the panel finally becomes wider than 1.5:1 and the image starts
   cropping vertically. Below that it changes nothing.

   Also worth knowing: the template hides this image entirely below 880px, so
   at 390 there is no hero photograph on About at all.
   --------------------------------------------------------------------------- */
/* 2026-10-12: the new father-and-son photograph is framed at 38% 28% in the template, so this
   older override has to agree with it or it would pull the framing back to the top centre. */
.ip-facelift #about .ah .heroimg { background-position: 38% 28%; }

/* ---------------------------------------------------------------------------
   3. COMMUNITY: the ambassador card is GONE FROM THE TEMPLATE as of 2026-10-11,
   on Marq's instruction, so there is nothing left to hide here. The positional
   :first-child rule that used to hide it has been removed deliberately: with the
   card deleted it would have hidden "Partner with us" instead. The two-column
   grid now lives in the template's own stylesheet, beside the two cards it lays out.
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   4a. RESOURCES CARDS: THE BYLINE BELONGS INSIDE THE CARD.
   The byline is a sibling of the card body, after it, so it rendered flush to
   the card's left edge under the white body. It cannot be moved by CSS into
   another element, so it is positioned into the body's own padding box instead,
   on the same baseline as "Read article", which is the last thing in the body.
   The element carries an inline style attribute (display, font-size, colour,
   margin-top), so those four need !important and nothing else does.
   Its colour measured 3.02:1 on white, under the 4.5 that 12px text needs, so
   it moves to the same ink the rest of the card's secondary text uses: 7.29:1.
   --------------------------------------------------------------------------- */
.ip-facelift .article-card { position: relative; }
.ip-facelift .article-card-body { flex: 1 1 auto; }
.ip-facelift .article-card-cta { display: block; text-align: right; }
.ip-facelift .article-card-byline {
  position: absolute;
  left: 24px;
  bottom: 28px;
  max-width: calc(100% - 48px - 8.5em);
  margin: 0 !important;
  color: var(--fl-ink2) !important;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 767.98px) {
  /* under the link, still inside the card's padding */
  .ip-facelift .article-card-byline {
    position: static;
    max-width: none;
    padding: 0 24px 20px;
    margin: 10px 0 0 !important;
    white-space: normal;
  }
  .ip-facelift .article-card-cta { text-align: left; }
}

/* ---------------------------------------------------------------------------
   4b. NO AUTOMATIC HYPHENATION IN HEADINGS.
   The loaded Plus Jakarta Sans subset is MISSING U+00AD SOFT HYPHEN and
   U+2010 HYPHEN (checked against the woff2 the site serves). Any automatic
   hyphenation therefore has no hyphen glyph to draw and renders .notdef, a
   box, at the break. Nothing on the site sets hyphens:auto today, so this
   changes nothing visible; it removes the only mechanism that produces the
   reported boxes, and costs nothing.
   --------------------------------------------------------------------------- */
.ip-facelift h1,
.ip-facelift h2,
.ip-facelift h3,
.ip-facelift h4,
.ip-facelift .h2,
.ip-facelift .article-card-title {
  -webkit-hyphens: none;
  hyphens: none;
}

/* ===========================================================================
   FIND HERO v2 (CODE-innapace-find-hero-matched-colour-2026-10-11).
   Marq: "yes, let's build this version."

   This replaces the cream band and the baked-in blend. Marq looked at the live
   hero on a 14 inch laptop and a 27 inch monitor and found two faults, both of
   which were mine and both of which were in this block:

     1. the title did not line up with the filter box, because the box is centred
        on --fl-page-max and the title was not centred on anything;
     2. cream showed around the photograph on wide screens, because object-fit:
        contain shrank the picture inside a box that covered the right 78%.

   The fix changes where the colour comes from. There is no cream here any more
   and no wash painted over the picture. The whole band takes the photograph's
   OWN dominant colour, set from the same pre-paint class the chooser already
   puts on <html>, and the picture fades into that colour with a mask. Because
   the thing it fades into is its own colour, there is no pair of surfaces that
   can fail to line up, which is what every earlier version got wrong.
   =========================================================================== */

/* ---- 1. the band is the chosen photograph's own colour, edge to edge ------- */
/* !important throughout: the theme sets `.ipf30 .hero { background: #e7ebee }`
   !important, repeatedly. Nothing beats !important except !important. */
.ip-facelift .fl-find-hero {
  background: #ffffff !important;      /* first visit and no-JS: the silhouettes */
  background-image: none !important;
  position: relative;
  min-height: clamp(420px, calc(260px + 12vw), 540px) !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: 58px;                /* the filter box still overlaps by 34px */
  /* The hero carried its own side padding, and that is what broke the alignment
     the brief is about. The copy box sizes itself with `100% - gutter*2`, and
     inside a padded parent that 100% is the PADDING BOX, not the page: measured
     at 1440, the copy landed at x=172 while the filter box sat at x=40, which is
     the 132px Marq saw on his monitor. The copy now supplies the gutter itself,
     so both boxes are computed from the same width and cannot drift. */
  padding-inline: 0 !important;
}
html.ipfh-laughing .ip-facelift .fl-find-hero { background: #efebe8 !important; }
html.ipfh-group .ip-facelift .fl-find-hero { background: #e4e4e3 !important; }
html.ipfh-yoga  .ip-facelift .fl-find-hero { background: #e7e9db !important; }
html.ipfh-family .ip-facelift .fl-find-hero { background: #e4e5e7 !important; }

/* ---- 2. the copy stands on exactly the filter box's grid ------------------- */
/* Same three declarations as .fl-filterbox, so the left edges cannot drift
   apart: whatever the window does to one, it does to the other. */
.ip-facelift .fl-fh-copy {
  position: relative;
  z-index: 1;
  width: calc(100% - (var(--fl-gutter) * 2));
  max-width: var(--fl-page-max);
  margin-inline: auto;
}
.ip-facelift .fl-fh-copy > * { max-width: 600px; }

/* ---- 3. the photograph fills everything to the right of the words --------- */
.ip-facelift .ipfh2-wrap {
  --ipfh-fade: clamp(160px, 11vw, 280px);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  /* the copy's own left edge, computed the same way the copy computes it, plus
     the clear space the brief asks for. Percentages here resolve against the
     section, not the viewport, so the scrollbar cannot shift this by 15px the
     way a 100vw term would. */
  /* The brief's figure was clamp(440px, 41vw, 620px) and asked me to tune it so
     no title word ever sits on the solid part of a photograph. 440 does not hold
     at the narrow end: the title is capped at 600px and starts at the copy's own
     left edge, so at 1024 the picture began 160px INSIDE the words and "you" read
     2.7:1 on the group photograph. The floor is therefore the title's own width,
     600px, which puts the picture's edge exactly where the words stop. Measured
     again afterwards: nothing over a photograph at any width, and the 41vw term
     still does the work from 1463 up. */
  left: calc(max(var(--fl-gutter), (100% - var(--fl-page-max)) / 2) + clamp(600px, 41vw, 620px));
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--ipfh-fade));
          mask-image: linear-gradient(90deg, transparent 0, #000 var(--ipfh-fade));
}

/* Every picture carries data-src and no src, so nothing is requested until the
   inline chooser gives exactly one of them its source. */
.ip-facelift .ipfh2 {
  display: none;
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: auto;
  max-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--ipfh-fade));
          mask-image: linear-gradient(90deg, transparent 0, #000 var(--ipfh-fade));
}
/* The silhouettes are a wide, shallow strip rather than a photograph, so they
   are anchored to the bottom and allowed to cover: at full height they would
   stand several times too tall. */
.ip-facelift .ipfh2--sil,
.ip-facelift .ipfh2--nojs {
  top: auto;
  bottom: 0;
  width: 100%;
  height: auto;
  min-height: 75%;
  object-fit: cover;
  object-position: right bottom;
}

.ip-facelift .ipfh2--sil,
.ip-facelift .ipfh2--nojs { display: block; }
html.ipfh-laughing .ip-facelift .ipfh2--sil,
html.ipfh-group .ip-facelift .ipfh2--sil,
html.ipfh-yoga .ip-facelift .ipfh2--sil,
html.ipfh-family .ip-facelift .ipfh2--sil { display: none; }
html.ipfh-laughing .ip-facelift .ipfh2--laughing { display: block; }
html.ipfh-group  .ip-facelift .ipfh2--group  { display: block; }
html.ipfh-yoga   .ip-facelift .ipfh2--yoga   { display: block; }
html.ipfh-family .ip-facelift .ipfh2--family { display: block; }

/* the words keep their own layer above the picture */
.ip-facelift .fl-find-hero > *:not(.ipfh2-wrap) { position: relative; z-index: 1; }

/* ---- 4. the faded phrase -------------------------------------------------- */
/* navy to #1f7d69 to #26907a, per the brief. #26907a is the lightest point and
   therefore the one that decides whether this passes; it is measured against
   all four bands in the report. */
.ip-facelift .fl-find-hero .fl-fade {
  background-image: linear-gradient(92deg, var(--fl-navy) 0%, #1f7d69 55%, #26907a 100%);
}

/* ---- 5. phone: the picture sits above the title --------------------------- */
@media (max-width: 767.98px) {
  .ip-facelift .fl-find-hero {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 0 !important;
    padding-bottom: 46px;
  }
  .ip-facelift .ipfh2-wrap {
    position: relative;
    order: -1;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    /* width has to be stated. Every picture is position:absolute now, so this
       box has no in-flow content to take a width from, and as a flex item in a
       column it measured 0 wide: the photograph rendered at x=-639, entirely
       off the screen. Measured, not guessed. */
    width: 100%;
    height: 200px;
    margin-bottom: 18px;
    /* the sideways fade belongs to the desktop layout only */
    -webkit-mask-image: none;
            mask-image: none;
  }
  .ip-facelift .ipfh2,
  .ip-facelift .ipfh2--sil,
  .ip-facelift .ipfh2--nojs {
    position: absolute;
    right: 0;
    top: 0;
    bottom: auto;
    height: 100%;
    width: auto;
    min-height: 0;
    object-fit: cover;
    object-position: right center;
    -webkit-mask-image: none;
            mask-image: none;
  }
  /* the bottom fade is the band colour, not cream, so it disappears into the
     area the title sits on */
  .ip-facelift .ipfh2-wrap::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 42%;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
  }
  html.ipfh-laughing .ip-facelift .ipfh2-wrap::after {
    background: linear-gradient(180deg, rgba(239, 235, 232, 0) 0%, #efebe8 100%);
  }
  html.ipfh-group .ip-facelift .ipfh2-wrap::after {
    background: linear-gradient(180deg, rgba(228, 228, 227, 0) 0%, #e4e4e3 100%);
  }
  html.ipfh-yoga .ip-facelift .ipfh2-wrap::after {
    background: linear-gradient(180deg, rgba(231, 233, 219, 0) 0%, #e7e9db 100%);
  }
  html.ipfh-family .ip-facelift .ipfh2-wrap::after {
    background: linear-gradient(180deg, rgba(228, 229, 231, 0) 0%, #e4e5e7 100%);
  }
}

/* ===========================================================================
   "KNOW SOMEONE WHO SHOULD BE HERE?" (CODE-innapace-suggest-section-approved-2026-10-11)
   Replaces the plain white box under the results, in the same place.
   =========================================================================== */

.ip-facelift .ip-sg {
  position: relative;
  overflow: hidden;
  margin: 40px 0 0;
  padding: 44px;
  border-radius: 18px;
  background: var(--fl-navy);
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 40px;
  align-items: center;
}
/* the soft teal glow in the corner, decorative only */
.ip-facelift .ip-sg::after {
  content: "";
  position: absolute;
  right: -120px;
  top: -120px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(47, 166, 140, .28), rgba(47, 166, 140, 0) 70%);
  pointer-events: none;
}
.ip-facelift .ip-sg-copy { position: relative; z-index: 1; }
.ip-facelift .ip-sg-eb {
  display: block;
  font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fl-teal);
}
.ip-facelift .ip-sg h3 {
  font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.035em;
  color: var(--fl-cream);
  margin: 10px 0 14px;
}
.ip-facelift .ip-sg h3 .ip-sg-f {
  background-image: linear-gradient(90deg, var(--fl-cream), var(--fl-teal) 45%, var(--fl-coral));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
  .ip-facelift .ip-sg h3 .ip-sg-f { -webkit-text-fill-color: currentColor; color: var(--fl-teal); }
}
.ip-facelift .ip-sg-lead {
  color: rgba(250, 247, 242, .92);
  font-size: 17px;
  line-height: 1.55;
  max-width: 520px;
  margin: 0;
}
.ip-facelift .ip-sg-steps {
  display: flex;
  gap: 10px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  flex-wrap: wrap;
}
.ip-facelift .ip-sg-step {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(250, 247, 242, .07);
  border: 1px solid rgba(250, 247, 242, .22);
  border-radius: 12px;
  padding: 10px 14px;
  color: var(--fl-cream);
  font-size: 14px;
}
.ip-facelift .ip-sg-step b {
  display: inline-flex;
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 50%;
  background: var(--fl-teal);
  color: var(--fl-navy);
  align-items: center;
  justify-content: center;
  font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
  font-size: 13px;
  font-weight: 800;
}

/* the white card */
.ip-facelift .ip-sg-form {
  position: relative;
  z-index: 1;
  background: #fff;
  border-radius: 16px;
  padding: 26px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .25);
}
.ip-facelift .ip-sg-form h4 {
  font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--fl-navy);
  margin: 0;
}
.ip-facelift .ip-sg-sub { font-size: 14px; color: var(--fl-ink2); margin: 4px 0 16px; }
.ip-facelift .ip-sg-form label,
.ip-facelift .ip-sg-fs legend {
  display: block;
  font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #5c6873;
  margin: 12px 0 6px;
  padding: 0;
}
.ip-facelift .ip-sg-opt { text-transform: none; letter-spacing: 0; font-weight: 500; }
.ip-facelift .ip-sg-form input[type="text"] {
  width: 100%;
  font-size: 16px;            /* 16px, so a phone does not zoom on focus */
  min-height: 46px;
  padding: 12px 14px;
  border: 1px solid #d9d3c9;
  border-radius: 10px;
  background: var(--fl-cream);
  color: var(--fl-navy);
}
.ip-facelift .ip-sg-form input[type="text"]:focus-visible,
.ip-facelift .ip-sg-form input[type="text"]:focus {
  outline: 3px solid rgba(47, 166, 140, .45);
  outline-offset: 1px;
  border-color: var(--fl-tealD);
}
.ip-facelift .ip-sg-fs { border: 0; margin: 0; padding: 0; }
.ip-facelift .ip-sg-chips { display: flex; flex-wrap: wrap; gap: 6px; }
/* real radio buttons, so a screen reader announces a group of choices. The input is hidden
   from sight only, never from the accessibility tree, and the focus ring follows it. */
.ip-facelift .ip-sg-chip { margin: 0; padding: 0; }
.ip-facelift .ip-sg-chip input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.ip-facelift .ip-sg-chip span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid #cfe0d8;
  background: #fff;
  color: var(--fl-tealD);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.ip-facelift .ip-sg-chip input:checked + span {
  background: var(--fl-tealD);
  border-color: var(--fl-tealD);
  color: #fff;
}
.ip-facelift .ip-sg-chip input:focus-visible + span {
  outline: 3px solid rgba(47, 166, 140, .45);
  outline-offset: 2px;
}
/* the honeypot: off screen rather than display:none, which some bots skip */
.ip-facelift .ip-sg-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.ip-facelift .ip-sg-go {
  margin-top: 18px;
  width: 100%;
  min-height: 48px;
  font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
  /* 19px, not 16px. White on the approved coral #c35f27 measures 4.21:1, which fails the 4.5
     that normal-size text needs. WCAG treats bold text from 18.66px up as large, where the bar
     is 3:1, so 19px bold clears it on the same colour. Marq chose this over changing the coral. */
  font-size: 19px;
  font-weight: 700;
  background: var(--fl-coralBtn);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 14px;
  cursor: pointer;
}
.ip-facelift .ip-sg-go:hover { background: var(--fl-coralBtnH); }
.ip-facelift .ip-sg-go:disabled { opacity: .65; cursor: default; }
.ip-facelift .ip-sg-go:focus-visible { outline: 3px solid rgba(47, 166, 140, .55); outline-offset: 2px; }
.ip-facelift .ip-sg-small { font-size: 12.5px; color: #5c6873; margin: 10px 0 0; text-align: center; }
.ip-facelift .ip-sg-msg:empty { display: none; }
.ip-facelift .ip-sg-msg {
  margin-top: 12px;
  font-size: 15px;
  color: var(--fl-navy);
  text-align: center;
}
.ip-facelift .ip-sg-done {
  font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
  font-weight: 700;
  color: var(--fl-tealD);
  margin: 0;
}

@media (max-width: 900px) {
  /* one column, the words first and the card below at full width */
  .ip-facelift .ip-sg {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
    padding: 28px 20px;
    border-radius: 14px;
  }
  .ip-facelift .ip-sg-steps { gap: 8px; }
  .ip-facelift .ip-sg-step { font-size: 13px; padding: 9px 12px; }
}

/* ===========================================================================
   THE MEMBER DASHBOARD.

   Measured first, and the measurement changed the job. Diffing the real
   dashboard markup with and without this stylesheet showed it changed exactly
   ONE property on ONE element: the footer's padding. The dashboard lives in its
   own class namespace (.ipa-, .iph-, .ippk, .db-), which nothing here targeted,
   so "bring it into scope" on its own was very nearly a no-op.

   What the dashboard actually needs is readability. An audit of the home view
   found 22 distinct contrast failures, all pre-existing, on pages a paying
   member reads every time they sign in. The ones below are fixed with colours
   this site already uses for exactly this purpose, so none of it is a new
   brand colour. The coral failures are NOT fixed here: coral text on these
   light backgrounds needs a darker coral than the approved #c35f27, and that
   is Marq's call, not mine. Numbers are in the report.
   =========================================================================== */

/* Muted greys. Every selector below hard-codes #8a978f (3.04:1 on white), #7a8794
   (3.67:1) or #6b7888 (3.96:1), all under the 4.5 that text this size needs. The
   list was taken from the stylesheet itself rather than found one element at a
   time, so it is the whole set, not the ones that happened to be on screen.
   --fl-ink2 is the ink the rest of the site already uses for secondary text:
   7.29:1 on white, 6.24:1 on the sage cards, 6.42:1 on the cream ones. */
.ip-facelift .page-dashboard .ipinv-left,
.ip-facelift .page-dashboard .iprl-lbl,
.ip-facelift .page-dashboard .iprl-none,
.ip-facelift .page-dashboard .iprl-empty,
.ip-facelift .page-dashboard .iprl-disc,
.ip-facelift .page-dashboard .iprl-dt,
.ip-facelift .page-dashboard .ipmk-lbl,
.ip-facelift .page-dashboard .ippk-note,
.ip-facelift .page-dashboard .ipxp-x,
.ip-facelift .page-dashboard .db-rl-lab,
.ip-facelift .page-dashboard .db-rl-p,
.ip-facelift .page-dashboard .ipcp-sub,
.ip-facelift .page-dashboard .ipcp-hd,
.ip-facelift .page-dashboard .ipcp-done,
.ip-facelift .page-dashboard .ipmk-note,
.ip-facelift .page-dashboard .ip-sample-legend,
.ip-facelift .page-dashboard .iph-lede,
.ip-facelift .page-dashboard .iph-p,
.ip-facelift .page-dashboard .iph-hd,
.ip-facelift .page-dashboard .iph-clab,
.ip-facelift .page-dashboard .db-plan-card-label,
.ip-facelift .page-dashboard .db-plan-card-slots,
.ip-facelift .page-dashboard .db-facility-meta,
.ip-facelift .page-dashboard .iph-stat small { color: var(--fl-ink2); }

/* Teal text on light. --fl-teal #2fa68c measured 2.66 to 3.02:1 here. #1c7260 is
   the teal already used for the "+N" tile on the homepage facility cards:
   5.79:1 on white, 4.95:1 on sage, 5.10:1 on cream. */
.ip-facelift .page-dashboard .iplip-opt,
.ip-facelift .page-dashboard .db-raillink,
.ip-facelift .page-dashboard .ipmk-copied,
.ip-facelift .page-dashboard .ippk-link,
.ip-facelift .page-dashboard .ipxp-eyeb,
.ip-facelift .page-dashboard .ip-ta-all,
.ip-facelift .page-dashboard .iph-st,
.ip-facelift .page-dashboard .iph-dyk-src a { color: #1c7260; }

/* The current item in the dashboard nav: white on --fl-teal measured 3.02:1.
   White on --fl-tealD is 5.01:1. !important because the rule it overrides
   declares both the background and the colour !important. */
.ip-facelift .page-dashboard .db-nav a.is-current { background: var(--fl-tealD) !important; }

/* ============================================================================
   FOR PRACTITIONERS: the hero photograph, rebuilt on the Find v2 technique.
   Brief CODE-innapace-three-new-photos-2026-10-12, part 2.

   The old crop had its blend baked into cream and was placed with object-fit:
   contain. This one is a plain photograph on a band of its own room's grey, and
   the page does the fade, exactly as Find does. There is then no pair of
   surfaces that can fail to meet: the picture fades into the colour it sits on.
   fp-hero-1230/615.webp stay on the server, no longer referenced.

   Contrast on #e9e9e9, confirmed rather than taken on trust: navy 14.33,
   #1f7d69 4.12, #26907a 3.23. The brief predicted 14.3 / 4.12 / 3.23.
   ============================================================================ */

.ip-facelift #prac .ph {
  background: #e9e9e9 !important;      /* the grey of her room, not cream */
  background-image: none !important;
  overflow: hidden;
  padding-inline: 0 !important;
}

.ip-facelift .fl-ph-photo {
  --ipfp-fade: clamp(160px, 11vw, 280px);
  position: absolute;
  top: 0; right: 0; bottom: 0;
  /* just past the copy. The copy column is a 600px .inner inside a 1180px wrap
     with 30px of padding, so this is computed from those numbers rather than a
     percentage that happens to look right at one width. */
  left: calc(max(30px, (100% - 1180px) / 2 + 30px) + clamp(600px, 42vw, 640px));
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--ipfp-fade));
          mask-image: linear-gradient(90deg, transparent 0, #000 var(--ipfp-fade));
}
.ip-facelift .fl-ph-photo img {
  position: absolute;
  right: 0;
  bottom: 0;                 /* right bottom, as the brief asks */
  top: auto;
  height: 100%;
  width: auto;
  max-width: none;
  display: block;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--ipfp-fade));
          mask-image: linear-gradient(90deg, transparent 0, #000 var(--ipfp-fade));
}

/* ---- below 1280 the photo goes above the copy ---------------------------- */
/* The copy column is a fixed 600px, so under about 1300 the words and the
   picture cannot both have room. The bottom fades into #e9e9e9, not cream. */
@media (max-width: 1279px) {
  .ip-facelift #prac .ph {
    padding-top: 24px !important;
    display: flex;
    flex-direction: column;
  }
  .ip-facelift .fl-ph-photo {
    position: relative;
    order: -1;
    inset: auto;
    width: 100%;
    max-width: 560px;
    margin: 0 auto 6px;
    aspect-ratio: 2000 / 1481;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .ip-facelift .fl-ph-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .ip-facelift .fl-ph-photo::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0; height: 64px;
    background: linear-gradient(to bottom, rgba(233, 233, 233, 0), #e9e9e9);
  }
}
/* ===========================================================================
   HEADINGS NEVER BREAK A WORD.
   Brief CODE-innapace-heading-wordbreak-NOT-DONE-priority-2026-10-11.
   Marq found "Understandi / ng our / professionals" live at about 1800 wide,
   with the full stop alone on its own line.

   The cause was NOT a heading rule, which is why adding `hyphens: none` to the
   headings earlier did nothing: `overflow-wrap: break-word` is set on BODY and
   inherits into every heading on the site. Read off the live page with
   CSS.getMatchedStylesForNode - the only rule in the inherited chain was
   `body -> overflow-wrap: break-word`. So the fix has to RE-DECLARE the property
   on headings; nothing about hyphenation can reach it.
   =========================================================================== */
.ip-facelift h1, .ip-facelift h2, .ip-facelift h3,
.ip-facelift h4, .ip-facelift h5, .ip-facelift h6,
.ip-facelift .h2, .ip-facelift .fl-h1, .ip-facelift .article-card-title,
.ip-facelift .eyebrow, .ip-facelift .fl-eyebrow, .ip-facelift .ip-fl-eb {
  word-break: normal;
  overflow-wrap: normal;
  -webkit-hyphens: manual;
          hyphens: manual;
}

/* Understanding: once a word cannot break, it has to FIT, or it overflows
   instead of breaking and that is no better. Measured on the live page at the
   real font: the column is 540px and "Understanding" is 536px at 80px type and
   617px at the 92px the clamp was reaching above 1704px wide. That is why the
   page was clean at 1440 and broken from about 1490 up.
   Both levers, because one alone is too tight: the column goes to 600px, which
   is what the other heroes use, and the cap comes down to 84px, where the word
   measures 563px and has 37px to spare. */
.ip-facelift #page-understanding .u-hero-grid > div:first-child { max-width: 600px !important; }
.ip-facelift #page-understanding .u-hero h1 { font-size: clamp(40px, 5.4vw, 84px) !important; }

/* Found by MEASURING the live pages rather than grepping the stylesheets, which is
   the only reason it was found at all: "Start your listing" in the For Practitioners
   founding block is painted by `#prac .ipfcta-btn { background: #e57b3f }` in the
   theme, nowhere near the facelift's own button classes, and measured 2.90:1 with
   white text. Same ruling as every other coral fill. */
.ip-facelift #prac .ipfcta-btn { background: var(--fl-coralBtn); }
.ip-facelift #prac .ipfcta-btn:hover { background: var(--fl-coralBtnH); }

/* .btn-coral is re-declared per page as `#about .btn-coral`, `#comm .btn-coral`
   and so on, each at (1,1,0), so a plain class rule cannot reach them and I would
   be adding one selector per page forever. !important once, here, covers every
   id-scoped variant including any page I have not measured. These are coral fills
   with white text, which is the only case the ruling applies to. */
.ip-facelift .btn-coral { background: var(--fl-coralBtn) !important; }
.ip-facelift .btn-coral:hover { background: var(--fl-coralBtnH) !important; }

/* ===========================================================================
   COMMUNITY, bottom half, option A
   (CODE-innapace-community-option-a-approved-2026-10-11, "Marq: option A").
   Built to the mockup's own stylesheet, not to a description of it: the brand
   marks are filled pills, the first two cards are white on white with only a
   border between them, the link is pinned to the bottom of every card, the navy
   card's eyebrow is teal, and the band is two columns centred against each other.

   TWO DELIBERATE DIFFERENCES, both contrast, both measured:
   - the mockup's pill gradients are #2fa68c and #e57b3f. White on those is
     2.50:1 and 2.90:1, which fails even the 3:1 large-text bar at 18px.
     They use the dark end of each hue instead: white on #1f7d69 is 4.76:1 and
     on #b5531d is 4.98:1, which is the coral fill already approved site-wide.
     Same shape, same hue family, readable.
   - "Sign me up" keeps that approved #b5531d rather than the mockup's #c35f27
     (4.21:1), for the same reason.
   =========================================================================== */

.ip-facelift .ipgi { background: #fff; border-top: 1px solid var(--fl-line); border-bottom: 1px solid var(--fl-line); }
.ip-facelift .ipgi-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));  /* minmax(0,…): a grid item's
                                                        automatic minimum is its
                                                        min-content width, so a long
                                                        word would push the row wide */
  gap: 18px;
  margin-top: 30px;
}
.ip-facelift .ipgi-card {
  background: #fff;
  border: 1px solid var(--fl-line);
  border-radius: 14px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ip-facelift .ipgi-card p { margin: 0; font-size: 15px; line-height: 1.5; color: #46566a; }
.ip-facelift .ipgi-card a {
  margin-top: auto;                     /* pins every link to the bottom, so the three
                                           cards line up however long the text runs */
  padding-top: 8px;
  font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
  font-weight: 700; font-size: 15px;
  color: var(--fl-tealD); text-decoration: none;
}
.ip-facelift .ipgi-card a:hover { text-decoration: underline; }

/* the brand marks, as filled pills */
.ip-facelift .ipgi-logo {
  height: 46px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  padding: 0 14px;
  width: max-content;
  margin-bottom: 6px;
  font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
  font-weight: 800; font-size: 18px;
  color: #fff;
}
.ip-facelift .ipgi-fb { background: linear-gradient(135deg, #1f7d69, #17604f); }
.ip-facelift .ipgi-mn { background: linear-gradient(135deg, #b5531d, #9f4818); }

.ip-facelift .ipgi-k {
  font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
  font-weight: 700; font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--fl-tealD);
}
.ip-facelift .ipgi-card h3 {
  margin: 0;
  font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
  font-weight: 800; font-size: 22px; letter-spacing: -.01em; color: var(--fl-navy);
}

/* the third card is the action, so it carries the navy */
.ip-facelift .ipgi-dark { background: var(--fl-navy); border-color: var(--fl-navy); }
.ip-facelift .ipgi-dark h3 { color: var(--fl-cream); }
.ip-facelift .ipgi-dark p  { color: rgba(250, 247, 242, .82); }
.ip-facelift .ipgi-dark .ipgi-k { color: var(--fl-teal); }   /* 5.67:1 on navy */
.ip-facelift .ipgi-dark a { color: #fff; }

/* ---- the navy sign-up band ------------------------------------------------ */
.ip-facelift .ipcs-band { background: var(--fl-navy); color: var(--fl-cream); }
.ip-facelift .ipcs-grid {
  display: grid;
  grid-template-columns: 1.05fr minmax(0, 1fr);
  gap: 40px;
  align-items: center;                  /* the copy sits centred against the card */
}
.ip-facelift .ipcs-copy .eyebrow { color: var(--fl-teal); }
.ip-facelift .ipcs-copy .h2 { color: var(--fl-cream); }
.ip-facelift .ipcs-copy .h2 .t {
  background: var(--fl-gradDk);         /* cream into teal into coral, the dark-band fade */
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.ip-facelift .ipcs-card {
  background: #fff;
  border-radius: 16px;
  padding: 26px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .2);
  display: block;
}
/* off-screen rather than display:none, so it stays reachable and clearable */
.ip-facelift .ipcs-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ip-facelift .ipcs-l {
  display: block; margin: 0 0 6px;
  font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
  font-weight: 700; font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: #6b7783;
}
.ip-facelift .ipcs-email {
  width: 100%; padding: 13px 14px; font-size: 16px;
  border: 1px solid #d9d3c9; border-radius: 10px;
  background: var(--fl-cream); color: var(--fl-navy);
}
.ip-facelift .ipcs-ck { display: flex; flex-direction: column; gap: 8px; margin: 14px 0; }
.ip-facelift .ipcs-ck label { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: var(--fl-navy); cursor: pointer; }
.ip-facelift .ipcs-ck input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--fl-tealD); flex: none; }
.ip-facelift .ipcs-ck small { display: block; color: #6b7783; font-size: 13px; }
.ip-facelift .ipcs-go {
  width: 100%; border: 0; border-radius: 999px; padding: 14px; cursor: pointer;
  font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
  font-weight: 700; font-size: 16px;
  background: var(--fl-coralBtn); color: #fff;
}
.ip-facelift .ipcs-go:hover { background: var(--fl-coralBtnH); }
.ip-facelift .ipcs-go:disabled { opacity: .65; cursor: default; }
.ip-facelift .ipcs-msg { margin: 10px 0 0; min-height: 18px; font-size: 14px; text-align: center; }
.ip-facelift .ipcs-msg.ok  { color: var(--fl-tealD); }
.ip-facelift .ipcs-msg.err { color: #b3402b; }
.ip-facelift .ipcs-fine { margin-top: 10px; font-size: 12.5px; line-height: 1.5; color: #6b7783; text-align: center; }

/* the band is navy, so everything written straight onto it is light. `.ctx` is set
   elsewhere at a higher specificity, which is why the lead first rendered dark grey
   on navy and could not be read at all. */
.ip-facelift .ipcs-band .ctx,
.ip-facelift .ipcs-copy .ctx { color: rgba(250, 247, 242, .88) !important; font-size: 17px; line-height: 1.55; max-width: 640px; }
.ip-facelift .ipcs-band .h2 { color: var(--fl-cream) !important; }
/* …but the card sits on white, so its own text stays dark */
.ip-facelift .ipcs-card .ipcs-fine,
.ip-facelift .ipcs-card .ipcs-l { color: #6b7783 !important; }
.ip-facelift .ipcs-card .ipcs-ck span { color: var(--fl-navy); }
.ip-facelift .ipcs-card .ipcs-ck small { color: #6b7783; }

@media (max-width: 860px) {
  .ip-facelift .ipgi-row  { grid-template-columns: minmax(0, 1fr); }
  .ip-facelift .ipcs-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}

/* Four corrections after measuring the deployed page against the mockup. Each one
   is a rule of this block losing to a more specific one that already existed, which
   is the same shape of mistake as the lead reading dark grey on navy. */

/* 1. the section is white in the mockup; it was rendering cream */
.ip-facelift .ipgi { background: #fff !important; }

/* 2. the mockup's header block is left aligned, not centred like the page default,
      and its lead is held to 640px rather than running the full width */
.ip-facelift .ipgi .sec-head { text-align: left; }
.ip-facelift .ipgi .sec-head .ctx { margin-left: 0; margin-right: 0; max-width: 640px; }

/* 3. the eyebrow on the navy band measured 3.58:1, under the 4.5 a 13px bold label
      needs. #5ec9ae on this navy measures 8.1:1 and is still the same teal family. */
.ip-facelift .ipcs-copy .eyebrow { color: #5ec9ae !important; }

/* 4. the fine print was inheriting the page's 17px body size; the mockup sets 12.5 */
.ip-facelift .ipcs-card .ipcs-fine { font-size: 12.5px !important; line-height: 1.5; }

/* The header block stayed centred: the page centres .sec-head at a higher
   specificity than this block could reach. The mockup has it left aligned with
   the lead held to 640px, so it lines up with the three cards below it. */
.ip-facelift .ipgi .sec-head,
.ip-facelift .ipgi .sec-head .eyebrow,
.ip-facelift .ipgi .sec-head .h2,
.ip-facelift .ipgi .sec-head .ctx { text-align: left !important; }
.ip-facelift .ipgi .sec-head .ctx { margin-left: 0 !important; margin-right: 0 !important; max-width: 640px !important; }
.ip-facelift .ipgi .sec-head .eyebrow { justify-content: flex-start; }

/* the eyebrow kept its centring: it is centred by its own rule, not by the block's
   text-align, so the margin has to be reset too */
.ip-facelift .ipgi .sec-head .eyebrow { margin-left: 0 !important; margin-right: auto !important; width: max-content; }

/* ===========================================================================
   DASHBOARD: the six coral labels, per the 12:35 ruling ("use option 2").
   They move to #1c7260, the teal the facelift already uses for eyebrows on light
   backgrounds. No new colour. Measured: 5.79:1 on white, 5.12 on sage, 5.42 on
   cream, all clear of 4.5. Coral stays where it passes: fills and large text.

   The selectors come from the dashboard's OWN stylesheet rather than from hunting
   elements one at a time, which is what made the earlier pass converge. These four
   carry #D85A30 as text in innapace-dashboard-v2.php's inline CSS.
   =========================================================================== */
.ip-facelift .v2 .bl .d,
.ip-facelift .v2 .tag,
.ip-facelift .v2 .dt,
.ip-facelift .v2 .dyk .k { color: #1c7260; }

/* "View public profile" is a coral FILL with white text, so it takes the button
   ruling rather than the label ruling: #e57b3f measured 2.90:1, #b5531d is 4.98. */
.ip-facelift .page-dashboard .db-btn-coral,
.ip-facelift .db-btn-coral { background: var(--fl-coralBtn) !important; }
.ip-facelift .page-dashboard .db-btn-coral:hover,
.ip-facelift .db-btn-coral:hover { background: var(--fl-coralBtnH) !important; }

/* ===========================================================================
   REGISTER: readability on the signup path.
   B8 of the go-live checklist. Five distinct contrast failures measured on the
   live page, all small text, all in colours this site already has a ruling for.
   Nothing about the flow, the fields or the Stripe steps is touched.

   measured on white unless noted:
     .rv2-progress-num   white on #2fa68c   3.02 -> white on #1f7d69   4.76
     .rv2-step-eyebrow   #e57b3f            2.90 -> #b5531d            4.98
     .rv2-cat-pill       #2fa68c            3.02 -> #1c7260            5.79
     .rv2-cat-desc       #6b7888            4.50 -> #4a5866            7.29
     "Sign in" link      #2fa68c            3.02 -> #1c7260            5.79
   =========================================================================== */
/* Every selector here carries .page-register-v2 as well, and that is not decoration.
   The register sheet writes these as `.page-register-v2 .rv2-x`, which is (0,2,0).
   The first version of this block used `.ip-facelift .rv2-x`, also (0,2,0), so it
   TIED, and innapace-register-v2.css is enqueued AFTER innapace-facelift.css, so the
   tie went to the register sheet and nothing changed. Read off the live page: the
   colours were identical before and after deploying. (0,3,0) settles it. */
.ip-facelift .page-register-v2 .rv2-progress-step.is-done .rv2-progress-num,
.ip-facelift .page-register-v2 .rv2-progress-step.is-current .rv2-progress-num,
.ip-facelift .page-register-v2 .rv2-progress-num { background: var(--fl-tealD); color: #fff; }
.ip-facelift .page-register-v2 .rv2-step-eyebrow { color: var(--fl-coralBtn); }
.ip-facelift .page-register-v2 .rv2-cat-pill { color: #1c7260; }
.ip-facelift .page-register-v2 .rv2-cat-desc { color: var(--fl-ink2); }
/* the sign-in link under the form, teal at 3.02 on white */
.ip-facelift .page-register-v2 a { color: #1c7260; }
.ip-facelift .page-register-v2 .rv2-cat-card a,
.ip-facelift .page-register-v2 button a { color: inherit; }
/* the hint's link is styled as `.page-register-v2 .rv2-hint a`, another (0,3,0) tie
   that the later sheet won. One more class settles it. */
.ip-facelift .page-register-v2 .rv2-hint a { color: #1c7260; }

/* Two pieces of hero copy that the grey band pushed under 4.5:1. Both sat on cream
   before and both are inside the hero, so this is a consequence of changing the band
   and belongs with it. Measured on #e9e9e9: the eyebrow read 4.00 and "or read on
   first" 3.05; --fl-ink2 #4a5866 gives 6.01 on the same grey. */
.ip-facelift #prac .ph .eyebrow { color: var(--fl-ink2) !important; }
.ip-facelift #prac .ph .ro      { color: var(--fl-ink2) !important; }