/* ============================================================
   Phibon v4 — components
   Naming: .phi-<block>__<element>, modifier .--<name>
   No rounded corners, no cards, no shadows except the two
   overlays. Structure is hairlines, scale and ground.
   ============================================================ */

/* ---------- Buttons ---------- */
.phi-btn {
  display: inline-flex; align-items: center; gap: var(--phi-s2);
  min-height: 2.875rem; padding: var(--phi-s2) var(--phi-s4);
  font-family: var(--phi-font-text); font-size: var(--phi-size--1);
  font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  background: var(--phi-action-bg); color: var(--phi-action-fg);
  border: 1px solid var(--phi-action-bg); border-radius: 0;
  transition: background var(--phi-dur-1) var(--phi-ease), color var(--phi-dur-1) var(--phi-ease),
              border-color var(--phi-dur-1) var(--phi-ease);
}
.phi-btn:hover { background: var(--phi-navy-800); border-color: var(--phi-navy-800); color: var(--phi-action-fg); }
.phi-btn__arrow { transition: transform var(--phi-dur-2) var(--phi-ease); }
.phi-btn:hover .phi-btn__arrow { transform: translateX(4px); }

.phi-btn--quiet { background: transparent; color: var(--phi-text-heading); border-color: var(--phi-rule-strong); }
.phi-btn--quiet:hover { background: transparent; color: var(--phi-text-heading); border-color: var(--phi-ink); }
.phi-btn--light { background: var(--phi-paper); color: var(--phi-ink); border-color: var(--phi-paper); }
.phi-btn--light:hover { background: var(--phi-mint-200); color: var(--phi-ink); border-color: var(--phi-mint-200); }

.phi-dark .phi-btn { background: var(--phi-on-dark); color: var(--phi-abyss); border-color: var(--phi-on-dark); }
.phi-dark .phi-btn:hover { background: var(--phi-invert-hover); color: var(--phi-abyss); border-color: var(--phi-invert-hover); }
.phi-dark .phi-btn--quiet { background: transparent; color: var(--phi-on-dark); border-color: var(--phi-rule-dark-strong); }
.phi-dark .phi-btn--quiet:hover { background: var(--phi-quiet-hover); color: var(--phi-on-dark); border-color: var(--phi-on-dark); }

/* The circular arrow. One affordance, used only for "go deeper". */
.phi-round {
  display: inline-grid; place-items: center; width: 3.25rem; height: 3.25rem;
  border-radius: 999px; border: 1px solid var(--phi-rule-strong);
  color: var(--phi-text-heading); text-decoration: none; flex: none;
  transition: background var(--phi-dur-2) var(--phi-ease), color var(--phi-dur-2) var(--phi-ease),
              border-color var(--phi-dur-2) var(--phi-ease);
}
.phi-round:hover { background: var(--phi-ink); color: var(--phi-paper); border-color: var(--phi-ink); }
.phi-dark .phi-round { border-color: var(--phi-rule-dark-strong); color: var(--phi-on-dark); }
.phi-dark .phi-round:hover { background: var(--phi-on-dark); color: var(--phi-abyss); border-color: var(--phi-on-dark); }

.phi-link {
  display: inline-flex; align-items: baseline; gap: var(--phi-s2);
  font-size: var(--phi-size--1); font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  text-decoration: none; color: var(--phi-text-heading);
  padding-bottom: 3px; border-bottom: 1px solid var(--phi-accent-ink);
}
.phi-link:hover { color: var(--phi-text-heading); border-bottom-color: var(--phi-ink); }
.phi-dark .phi-link { color: var(--phi-on-dark); border-bottom-color: var(--phi-on-dark-accent); }
.phi-dark .phi-link:hover { color: var(--phi-on-dark-accent); border-bottom-color: var(--phi-on-dark-accent); }

/* ---------- Header ----------
   Dark by default, because the brand's default state is dark. On a
   paper page it keeps the dark bar: the chrome is constant and the
   page beneath it changes, which is what makes the site feel like
   one publication rather than a set of templates. */
.phi-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: var(--phi-z-header);
  background: var(--phi-abyss); color: var(--phi-on-dark-2);
  border-bottom: 1px solid var(--phi-rule-dark);
}
.phi-header__bar { display: flex; align-items: center; gap: var(--phi-s4); height: var(--phi-header); }
.phi-header__brand { display: flex; align-items: center; flex: none; color: var(--phi-on-dark); }
.phi-header__brand svg { height: 2.375rem; width: auto; display: block; }
.phi-header__nav { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.phi-header__actions { display: flex; align-items: center; gap: var(--phi-s2); flex: none; }

.phi-navitem {
  position: relative; display: inline-flex; align-items: center; gap: var(--phi-s1);
  min-height: 2.75rem; padding: 0 var(--phi-s3);
  font-family: inherit; font-size: var(--phi-size--1); font-weight: 500; letter-spacing: .04em;
  color: var(--phi-on-dark-2); text-decoration: none;
  background: none; border: 0; cursor: pointer;
  transition: color var(--phi-dur-1) var(--phi-ease);
}
.phi-navitem:hover, .phi-navitem[aria-expanded="true"] { color: var(--phi-on-dark); }
.phi-navitem::after {
  content: ""; position: absolute; left: var(--phi-s3); right: var(--phi-s3); bottom: 0; height: 2px;
  background: var(--phi-on-dark-accent); transform: scaleX(0); transform-origin: left;
  transition: transform var(--phi-dur-2) var(--phi-ease);
}
.phi-navitem:hover::after, .phi-navitem[aria-expanded="true"]::after { transform: scaleX(1); }
/* Current page is weight plus a permanent rule. Colour alone fails G128. */
.phi-navitem[aria-current="page"] { color: var(--phi-on-dark); font-weight: 600; }
.phi-navitem[aria-current="page"]::after { transform: scaleX(1); }
.phi-navitem__caret { transition: transform var(--phi-dur-1) var(--phi-ease); opacity: .7; }
.phi-navitem[aria-expanded="true"] .phi-navitem__caret { transform: rotate(180deg); }

/* ---------- Mega menu ---------- */
.phi-mega {
  position: absolute; inset-inline: 0; top: 100%;
  background: var(--phi-slate); color: var(--phi-on-dark-2);
  border-bottom: 1px solid var(--phi-rule-dark);
  box-shadow: var(--phi-shadow-menu); z-index: var(--phi-z-menu); display: none;
}
.phi-mega.is-open { display: block; }
.phi-mega__grid { display: grid; grid-template-columns: var(--phi-minor-fr) var(--phi-major-fr);
                  gap: var(--phi-s6); padding-block: var(--phi-s5); }
.phi-mega__intro p { color: var(--phi-on-dark-2); font-size: var(--phi-size--1); max-width: 36ch; }
.phi-mega__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(17rem,100%),1fr)); gap: 0 var(--phi-s5); }
.phi-mega__item { display: block; padding: var(--phi-s3) 0; border-top: 1px solid var(--phi-rule-dark); text-decoration: none; }
.phi-mega__item h3 { font-size: var(--phi-size-1); margin: 0 0 2px; color: var(--phi-on-dark);
                     display: flex; align-items: baseline; gap: var(--phi-s2); }
.phi-mega__item h3 i { font-family: var(--phi-font-text); font-style: normal; font-size: var(--phi-size--1);
                       color: var(--phi-on-dark-3); font-weight: 500; }
.phi-mega__item p { margin: 0; font-size: var(--phi-size--1); color: var(--phi-on-dark-3); max-width: 34ch; }
.phi-mega__item:hover h3 { color: var(--phi-on-dark-accent); }
@media (max-width: 62rem) { .phi-mega { display: none !important; } }

/* ---------- Mobile drawer ----------
   Absolutely positioned inside the sticky header, never fixed. */
.phi-burger { display: none; }
.phi-drawer {
  position: absolute; inset-inline: 0; top: 100%;
  max-height: calc(100vh - var(--phi-header)); overflow-y: auto;
  background: var(--phi-slate); border-bottom: 1px solid var(--phi-rule-dark);
  box-shadow: var(--phi-shadow-menu); display: none; padding-bottom: var(--phi-s5);
}
.phi-drawer.is-open { display: block; }
.phi-drawer__group { border-top: 1px solid var(--phi-rule-dark); }
.phi-drawer__toggle, .phi-drawer__link {
  display: flex; width: 100%; align-items: center; justify-content: space-between; gap: var(--phi-s3);
  min-height: 3.25rem; padding: var(--phi-s3) 0; font-family: var(--phi-font-display);
  font-size: var(--phi-size-1); font-weight: 400; color: var(--phi-on-dark);
  text-decoration: none; background: none; border: 0; cursor: pointer; text-align: left;
}
.phi-drawer__panel { display: none; padding-bottom: var(--phi-s3); }
.phi-drawer__panel.is-open { display: block; }
.phi-drawer__sub { display: block; padding: var(--phi-s2) 0 var(--phi-s2) var(--phi-s4);
  font-size: var(--phi-size-0); color: var(--phi-on-dark-2); text-decoration: none;
  border-left: 1px solid var(--phi-rule-dark); }
@media (max-width: 62rem) {
  .phi-header__nav { display: none; }
  .phi-burger { display: inline-flex; align-items: center; gap: var(--phi-s2); margin-left: auto; }
  .phi-header__actions .phi-btn--cta { display: none; }
}

/* ---------- Hero ----------
   Full-bleed photograph, a scrim heavy enough to carry white type at
   any crop, and one serif line at display scale. */
.phi-hero { position: relative; overflow: clip; isolation: isolate; background: var(--phi-abyss); }
.phi-hero__bg { position: absolute; inset: 0; z-index: -2; }
.phi-hero__bg img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.35) contrast(1.05); }
.phi-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--phi-scrim-v), var(--phi-scrim-h);
}
.phi-hero__in { padding-block: clamp(var(--phi-s6), 4.5rem + 8vw, var(--phi-s8)); position: relative; }
.phi-hero__h1 { font-size: var(--phi-display-1); color: var(--phi-on-dark); max-width: 17ch; margin-bottom: var(--phi-s4); }
.phi-hero__h1 em, .phi-hero h1 em { font-style: italic; color: var(--phi-on-dark-accent); }
.phi-hero__sub { font-size: var(--phi-display-4); color: var(--phi-on-dark-2); max-width: 54ch; line-height: 1.45; }
.phi-hero__cta { display: flex; flex-wrap: wrap; gap: var(--phi-s3); margin-top: var(--phi-s5); }
.phi-hero--page h1 { max-width: 20ch; }
.phi-hero--page .phi-lede { max-width: 58ch; }
.phi-hero--page .phi-hero__in { padding-block: clamp(var(--phi-s5), 3rem + 5vw, var(--phi-s7)); }

/* ---------- Client strip ---------- */
.phi-clients { display: flex; flex-wrap: wrap; align-items: center; gap: var(--phi-s2) var(--phi-s4);
  padding-block: var(--phi-s4); border-top: 1px solid var(--phi-rule-dark); }
.phi-clients__label { font-size: var(--phi-size--1); letter-spacing: var(--phi-tracking-label);
  text-transform: uppercase; color: var(--phi-on-dark-3); flex: none; }
.phi-clients__name { font-family: var(--phi-font-display); font-size: var(--phi-size-0); color: var(--phi-on-dark-2); }

/* ---------- Mosaic ----------
   Three pieces of evidence, sized by importance rather than by grid.
   The lead tile is the φ major; the two stacked tiles are the minor. */
.phi-mosaic { display: grid; grid-template-columns: var(--phi-major-fr) var(--phi-minor-fr);
              gap: var(--phi-s4); align-items: stretch; }
.phi-mosaic__side { display: grid; grid-template-rows: 1fr 1fr; gap: var(--phi-s4); }
@media (max-width: 62rem) {
  .phi-mosaic { grid-template-columns: 1fr; }
  .phi-mosaic__side { grid-template-rows: auto; }
}
.phi-tile {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 17rem; padding: var(--phi-s4); overflow: clip; isolation: isolate;
  text-decoration: none; background: var(--phi-slate); color: var(--phi-on-dark);
}
.phi-tile--lead { min-height: 34rem; }
.phi-tile__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2;
  filter: grayscale(.5); transform: scale(1.02);
  transition: transform var(--phi-dur-3) var(--phi-ease-out), filter var(--phi-dur-3) var(--phi-ease-out); }
.phi-tile::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(2,15,30,.15) 0%, rgba(2,15,30,.86) 78%); }
.phi-tile:hover .phi-tile__img, .phi-tile:focus-visible .phi-tile__img { transform: scale(1.06); filter: grayscale(0); }
.phi-tile__kind { font-size: var(--phi-size--1); font-weight: 600; letter-spacing: var(--phi-tracking-label);
  text-transform: uppercase; color: var(--phi-mint-300); margin-bottom: var(--phi-s2); }
.phi-tile__t { font-family: var(--phi-font-display); font-size: var(--phi-display-3); line-height: 1.08;
  color: var(--phi-on-dark); margin: 0; max-width: 22ch; }
.phi-tile--lead .phi-tile__t { font-size: var(--phi-display-2); max-width: 18ch; }
.phi-tile__d { font-size: var(--phi-size--1); color: var(--phi-on-dark-2); margin: var(--phi-s2) 0 0; max-width: 46ch; }
.phi-tile__go { margin-top: var(--phi-s3); display: inline-flex; align-items: center; gap: var(--phi-s2);
  font-size: var(--phi-size--1); font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--phi-on-dark); }
.phi-tile:hover .phi-tile__go span { transform: translateX(4px); }
.phi-tile__go span { display: inline-block; transition: transform var(--phi-dur-2) var(--phi-ease); }

/* ---------- Sector index ----------
   A numbered editorial list, not a grid of cards. The thumbnail is
   revealed by the row that is hovered, so the page is quiet at rest. */
.phi-index { border-top: 1px solid var(--phi-rule-dark); }
.phi-dark .phi-index { border-top-color: var(--phi-rule-dark); }
.phi-index__row {
  position: relative; display: grid; grid-template-columns: 3.5rem minmax(0,1fr) auto;
  gap: var(--phi-s4); align-items: center; padding: var(--phi-s4) 0;
  border-bottom: 1px solid var(--phi-rule-dark); text-decoration: none; color: inherit;
}
.phi-index__n { font-family: var(--phi-font-display); font-size: var(--phi-size-1); color: var(--phi-on-dark-3); }
.phi-index__t { display: block; font-family: var(--phi-font-display); font-size: var(--phi-display-3);
  line-height: 1.1; color: var(--phi-on-dark); margin: 0; transition: color var(--phi-dur-1) var(--phi-ease); }
.phi-index__d { display: block; font-size: var(--phi-size--1); color: var(--phi-on-dark-3);
  margin: var(--phi-s1) 0 0; max-width: 56ch; }
.phi-index__row:hover .phi-index__t { color: var(--phi-mint-300); }
.phi-index__thumb {
  position: absolute; right: 6rem; top: 50%; width: 13rem; aspect-ratio: 1.618;
  transform: translateY(-50%) scale(.96); opacity: 0; pointer-events: none;
  transition: opacity var(--phi-dur-2) var(--phi-ease), transform var(--phi-dur-2) var(--phi-ease);
}
.phi-index__thumb img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.4); }
.phi-index__row:hover .phi-index__thumb { opacity: 1; transform: translateY(-50%) scale(1); }
@media (max-width: 75rem) { .phi-index__thumb { display: none; } }
@media (max-width: 40rem) {
  .phi-index__row { grid-template-columns: 2.5rem minmax(0,1fr); }
  .phi-index__row .phi-round { display: none; }
}

/* ---------- Discipline grid (services) ---------- */
.phi-disc { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(16rem,100%),1fr)); gap: 1px;
            background: var(--phi-rule); border: 1px solid var(--phi-rule); }
@media (min-width: 46rem) { .phi-disc { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 66rem) { .phi-disc { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.phi-disc__item { background: var(--phi-paper); padding: var(--phi-s4); text-decoration: none; display: block;
                  transition: background var(--phi-dur-1) var(--phi-ease); }
.phi-disc__item:hover { background: var(--phi-chalk); }
.phi-disc__n { font-family: var(--phi-font-display); font-size: var(--phi-size--1); color: var(--phi-text-tertiary); }
.phi-disc__t { font-family: var(--phi-font-display); font-size: var(--phi-size-2); margin: var(--phi-s2) 0; color: var(--phi-text-heading); }
.phi-disc__d { font-size: var(--phi-size--1); color: var(--phi-text-secondary); margin: 0; }

/* ---------- Editorial rows (work, insights) ---------- */
.phi-rows { border-top: 1px solid var(--phi-rule); }
.phi-row { display: grid; grid-template-columns: var(--phi-minor-fr) var(--phi-major-fr);
  gap: var(--phi-s5); align-items: center; padding-block: var(--phi-s4);
  border-bottom: 1px solid var(--phi-rule); text-decoration: none; color: inherit; }
.phi-dark .phi-rows { border-top-color: var(--phi-rule-dark); }
.phi-dark .phi-row { border-bottom-color: var(--phi-rule-dark); }
.phi-row__figure { overflow: clip; }
.phi-row__figure img { aspect-ratio: 1.618; width: 100%; object-fit: cover; filter: grayscale(1);
  transform: scale(1.01); transition: filter var(--phi-dur-3) var(--phi-ease-out), transform var(--phi-dur-3) var(--phi-ease-out); }
.phi-row:hover .phi-row__figure img { filter: grayscale(0); transform: scale(1.05); }
.phi-row__t { font-family: var(--phi-font-display); font-size: var(--phi-display-3); margin: 0 0 var(--phi-s2);
  color: var(--phi-text-heading); }
.phi-dark .phi-row__t { color: var(--phi-on-dark); }
.phi-row:hover .phi-row__t { color: var(--phi-accent-ink); }
.phi-dark .phi-row:hover .phi-row__t { color: var(--phi-on-dark-accent); }
.phi-row__s { margin: 0 0 var(--phi-s3); color: var(--phi-text-secondary); max-width: 60ch; }
.phi-dark .phi-row__s { color: var(--phi-on-dark-2); }
.phi-row__meta { display: flex; flex-wrap: wrap; gap: var(--phi-s2) var(--phi-s3);
  font-size: var(--phi-size--1); color: var(--phi-text-tertiary); }
.phi-dark .phi-row__meta { color: var(--phi-on-dark-3); }
.phi-row__outcome { display: flex; align-items: baseline; gap: var(--phi-s2); margin-bottom: var(--phi-s3); }
.phi-row__outcome b { font-family: var(--phi-font-display); font-size: var(--phi-size-3); font-weight: 400;
  color: var(--phi-text-heading); letter-spacing: -.02em; }
.phi-dark .phi-row__outcome b { color: var(--phi-on-dark); }
.phi-row__outcome span { font-size: var(--phi-size--1); color: var(--phi-text-secondary); }
.phi-dark .phi-row__outcome span { color: var(--phi-on-dark-2); }
@media (max-width: 62rem) { .phi-row { grid-template-columns: 1fr; gap: var(--phi-s3); } }

.phi-tag { display: inline-block; font-size: var(--phi-size--1); letter-spacing: .06em; text-transform: uppercase;
  color: var(--phi-text-tertiary); border: 1px solid var(--phi-rule); padding: 2px var(--phi-s2); }
.phi-dark .phi-tag { color: var(--phi-on-dark-2); border-color: var(--phi-rule-dark-strong); }

/* ---------- Offer blocks ---------- */
.phi-offer { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(15rem,100%),1fr)); gap: 0 var(--phi-s5); }
.phi-offer__item { padding: var(--phi-s4) 0; border-top: 1px solid var(--phi-rule); }
.phi-dark .phi-offer__item { border-top-color: var(--phi-rule-dark); }
.phi-offer__n { font-family: var(--phi-font-display); font-size: var(--phi-size--1);
  color: var(--phi-text-tertiary); display: block; margin-bottom: var(--phi-s2); }
.phi-dark .phi-offer__n { color: var(--phi-on-dark-3); }
.phi-offer__t { font-family: var(--phi-font-display); font-size: var(--phi-size-2); margin: 0 0 var(--phi-s2); }
.phi-dark .phi-offer__t { color: var(--phi-on-dark); }
.phi-offer__d { font-size: var(--phi-size--1); color: var(--phi-text-secondary); margin: 0 0 var(--phi-s3); }
.phi-dark .phi-offer__d { color: var(--phi-on-dark-2); }
.phi-offer__dur { font-size: var(--phi-size--1); font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--phi-accent-ink); }
.phi-dark .phi-offer__dur { color: var(--phi-on-dark-accent); }

/* ---------- Figures ---------- */
.phi-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(12rem,100%),1fr)); }
.phi-figure { padding: var(--phi-s4); border-left: 1px solid var(--phi-rule); }
.phi-figure:first-child { border-left: 0; padding-left: 0; }
.phi-dark .phi-figure { border-left-color: var(--phi-rule-dark); }
.phi-figure__n { font-family: var(--phi-font-display); font-size: var(--phi-size-5); line-height: 1;
  color: var(--phi-text-heading); letter-spacing: -.03em; }
.phi-dark .phi-figure__n { color: var(--phi-on-dark); }
.phi-figure__k { font-size: var(--phi-size--1); font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; margin-top: var(--phi-s2); }
.phi-figure__d { font-size: var(--phi-size--1); color: var(--phi-text-tertiary); margin: var(--phi-s1) 0 0; }
.phi-dark .phi-figure__d { color: var(--phi-on-dark-3); }
@media (max-width: 48rem) {
  .phi-figure { border-left: 0; border-top: 1px solid var(--phi-rule); padding-left: 0; }
  .phi-figure:first-child { border-top: 0; }
  .phi-dark .phi-figure { border-top-color: var(--phi-rule-dark); }
}

/* ---------- Formats ---------- */
.phi-formats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(18rem,100%),1fr)); gap: var(--phi-s5); }
.phi-format { border-top: 1px solid var(--phi-rule); padding-top: var(--phi-s4); display: flex; flex-direction: column; }
.phi-format--lead { border-top: 2px solid var(--phi-ink); }
.phi-dark .phi-format { border-top-color: var(--phi-rule-dark); }
.phi-dark .phi-format--lead { border-top-color: var(--phi-on-dark-accent); }
.phi-format__t { font-family: var(--phi-font-display); font-size: var(--phi-display-3); margin: 0 0 var(--phi-s1); }
.phi-dark .phi-format__t { color: var(--phi-on-dark); }
.phi-format__dur { font-size: var(--phi-size--1); font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--phi-accent-ink); margin-bottom: var(--phi-s3); }
.phi-dark .phi-format__dur { color: var(--phi-on-dark-accent); }
.phi-format ul { list-style: none; padding: 0; margin: 0 0 var(--phi-s4); }
.phi-format li { position: relative; padding-left: var(--phi-s4); font-size: var(--phi-size--1);
  color: var(--phi-text-secondary); }
.phi-dark .phi-format li { color: var(--phi-on-dark-2); }
.phi-format li::before { content: ""; position: absolute; left: 0; top: .66em; width: var(--phi-s3);
  height: 1px; background: var(--phi-accent-ink); }
.phi-dark .phi-format li::before { background: var(--phi-on-dark-accent); }
.phi-format__foot { margin-top: auto; }
.phi-format p { color: var(--phi-text-secondary); }
.phi-dark .phi-format p { color: var(--phi-on-dark-2); }

/* ---------- Method ---------- */
.phi-method { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(15rem,100%),1fr)); gap: 0 var(--phi-s5); }
.phi-method__step { padding: var(--phi-s4) 0; border-top: 1px solid var(--phi-rule); }
.phi-dark .phi-method__step { border-top-color: var(--phi-rule-dark); }
.phi-method__n { font-family: var(--phi-font-text); font-size: var(--phi-size--1); font-weight: 600;
  letter-spacing: var(--phi-tracking-label); text-transform: uppercase;
  color: var(--phi-accent-ink); display: block; margin-bottom: var(--phi-s2); }
.phi-dark .phi-method__n { color: var(--phi-on-dark-accent); }
.phi-method__t { font-family: var(--phi-font-display); font-size: var(--phi-size-2); margin: 0 0 var(--phi-s2); }
.phi-dark .phi-method__t { color: var(--phi-on-dark); }
.phi-method__p { font-size: var(--phi-size--1); color: var(--phi-text-secondary); margin: 0; }
.phi-dark .phi-method__p { color: var(--phi-on-dark-2); }

/* ---------- Team ---------- */
.phi-team { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(21rem,100%),1fr)); gap: var(--phi-s6); }
.phi-person { display: grid; grid-template-columns: var(--phi-minor-fr) var(--phi-major-fr); gap: var(--phi-s4); align-items: start; }
.phi-person img { aspect-ratio: .82; object-fit: cover; width: 100%; filter: grayscale(1); }
.phi-person__n { font-family: var(--phi-font-display); font-size: var(--phi-size-2); margin: 0 0 2px; }
.phi-person__r { font-size: var(--phi-size--1); letter-spacing: .09em; text-transform: uppercase;
  color: var(--phi-text-tertiary); margin: 0 0 var(--phi-s3); }
.phi-person__b { font-size: var(--phi-size--1); color: var(--phi-text-secondary); }

/* ---------- Page head, breadcrumbs, prose ---------- */
.phi-crumbs { padding-block: var(--phi-s3); font-size: var(--phi-size--1); color: var(--phi-text-tertiary);
  border-bottom: 1px solid var(--phi-rule); }
.phi-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--phi-s2); margin: 0; padding: 0; }
.phi-crumbs li { margin: 0; display: flex; align-items: center; gap: var(--phi-s2); }
.phi-crumbs li + li::before { content: "/"; color: var(--phi-rule-strong); }
.phi-crumbs a { color: var(--phi-text-secondary); text-decoration: none; }
.phi-crumbs a:hover { text-decoration: underline; }
.phi-crumbs [aria-current="page"] { color: var(--phi-text-heading); }

.phi-pagehead__grid { display: grid; grid-template-columns: var(--phi-major-fr) var(--phi-minor-fr);
  gap: var(--phi-s6); align-items: end; }
@media (max-width: 62rem) { .phi-pagehead__grid { grid-template-columns: 1fr; gap: var(--phi-s4); } }

.phi-prose { max-width: var(--phi-measure); }
.phi-prose h2 { font-size: var(--phi-size-3); margin-top: var(--phi-s5); }
.phi-prose h3 { font-size: var(--phi-size-2); margin-top: var(--phi-s4); }
.phi-prose ul li::marker { color: var(--phi-accent-ink); }
.phi-figurecap { font-size: var(--phi-size--1); color: var(--phi-text-tertiary); margin-top: var(--phi-s2); }

/* ---------- Filters ---------- */
.phi-chips { display: flex; flex-wrap: wrap; gap: var(--phi-s2); }
.phi-chip { min-height: 2.25rem; padding: var(--phi-s1) var(--phi-s3); font-family: inherit;
  font-size: var(--phi-size--1); font-weight: 500; letter-spacing: .03em; cursor: pointer;
  background: transparent; color: var(--phi-text-secondary);
  border: 1px solid var(--phi-rule-strong); border-radius: var(--phi-radius-pill);
  transition: background var(--phi-dur-1) var(--phi-ease), color var(--phi-dur-1) var(--phi-ease); }
.phi-chip:hover { color: var(--phi-text-heading); border-color: var(--phi-ink); }
.phi-chip[aria-pressed="true"] { background: var(--phi-ink); color: var(--phi-paper); border-color: var(--phi-ink); }
.phi-dark .phi-chip { color: var(--phi-on-dark-2); border-color: var(--phi-rule-dark-strong); }
.phi-dark .phi-chip:hover { color: var(--phi-on-dark); border-color: var(--phi-on-dark); }
.phi-dark .phi-chip[aria-pressed="true"] { background: var(--phi-on-dark); color: var(--phi-abyss); border-color: var(--phi-on-dark); }

/* ---------- Form ---------- */
.phi-form { display: grid; gap: var(--phi-s4); max-width: 34rem; }
.phi-field label { display: block; font-size: var(--phi-size--1); font-weight: 600; letter-spacing: .03em;
  margin-bottom: var(--phi-s2); color: var(--phi-text-heading); }
.phi-field input, .phi-field textarea, .phi-field select {
  width: 100%; min-height: 2.875rem; padding: var(--phi-s2) var(--phi-s3);
  font-family: inherit; font-size: var(--phi-size-0); color: var(--phi-text-primary);
  background: var(--phi-paper); border: 1px solid var(--phi-neutral-500); border-radius: 0; }
.phi-field textarea { min-height: 8rem; resize: vertical; }
.phi-field__hint { font-size: var(--phi-size--1); color: var(--phi-text-tertiary); margin-top: var(--phi-s1); }
.phi-form__status { font-size: var(--phi-size--1); }
.phi-form__status[data-state="error"] { color: var(--phi-danger-800); }
.phi-form__status[data-state="ok"] { color: var(--phi-success-800); }
.phi-gotcha { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- CTA band ---------- */
.phi-cta__grid { display: grid; grid-template-columns: var(--phi-major-fr) var(--phi-minor-fr);
  gap: var(--phi-s6); align-items: center; }
@media (max-width: 62rem) { .phi-cta__grid { grid-template-columns: 1fr; gap: var(--phi-s4); } }

/* ---------- Footer ---------- */
.phi-footer { background: var(--phi-abyss); color: var(--phi-on-dark-2); padding-block: var(--phi-s6) var(--phi-s4);
  border-top: 1px solid var(--phi-rule-dark); }
.phi-footer__grid { display: grid; grid-template-columns: minmax(0,1.618fr) repeat(3, minmax(0,1fr)); gap: var(--phi-s5); }
@media (max-width: 62rem) { .phi-footer__grid { grid-template-columns: repeat(auto-fit, minmax(min(11rem,100%),1fr)); } }
.phi-footer h2 { font-family: var(--phi-font-text); font-size: var(--phi-size--1); font-weight: 600;
  letter-spacing: var(--phi-tracking-label); text-transform: uppercase; color: var(--phi-on-dark-3);
  margin-bottom: var(--phi-s3); }
.phi-footer ul { list-style: none; padding: 0; margin: 0; }
.phi-footer li { margin-bottom: var(--phi-s2); }
.phi-footer a { color: var(--phi-on-dark-2); text-decoration: none; font-size: var(--phi-size--1); }
.phi-footer a:hover { color: var(--phi-on-dark); text-decoration: underline; }
.phi-footer__mark { color: var(--phi-on-dark); }
.phi-footer__mark svg { height: 2.75rem; width: auto; margin-bottom: var(--phi-s3); }
.phi-footer__sig { font-family: var(--phi-font-display); font-style: italic; color: var(--phi-on-dark-accent);
  font-size: var(--phi-size-0); }
.phi-footer__legal { margin-top: var(--phi-s5); padding-top: var(--phi-s3);
  border-top: 1px solid var(--phi-rule-dark); display: flex; flex-wrap: wrap; gap: var(--phi-s2) var(--phi-s4);
  font-size: var(--phi-size--1); color: var(--phi-on-dark-3); }

/* ---------- Search overlay ---------- */
.phi-search { position: fixed; inset: 0; z-index: var(--phi-z-overlay); display: none; }
.phi-search.is-open { display: block; }
.phi-search__scrim { position: absolute; inset: 0; background: rgba(2,15,30,.72); }
.phi-search__panel { position: relative; max-width: 46rem; margin: 6vh auto 0; background: var(--phi-paper);
  box-shadow: var(--phi-shadow-menu); overflow: hidden; }
.phi-search__input { width: 100%; border: 0; border-bottom: 1px solid var(--phi-rule);
  padding: var(--phi-s4); font-family: var(--phi-font-display); font-size: var(--phi-size-2); }
.phi-search__results { max-height: 58vh; overflow-y: auto; }
.phi-search__hit { display: block; padding: var(--phi-s3) var(--phi-s4); border-bottom: 1px solid var(--phi-rule); text-decoration: none; }
.phi-search__hit:hover { background: var(--phi-chalk); }
.phi-search__hit b { display: block; font-family: var(--phi-font-display); font-size: var(--phi-size-1);
  color: var(--phi-text-heading); font-weight: 400; }
.phi-search__hit span { font-size: var(--phi-size--1); color: var(--phi-text-tertiary); }
.phi-search__empty { padding: var(--phi-s4); font-size: var(--phi-size--1); color: var(--phi-text-tertiary); }


/* ---------- Theme switch ---------- */
.phi-theme { width: 2.75rem; justify-content: center; padding: 0; }
.phi-theme svg { transition: transform var(--phi-dur-2) var(--phi-ease); }
:root[data-phibon-theme="light"] .phi-theme svg { transform: rotate(180deg); }
.phi-drawer__theme { display: flex; align-items: center; gap: var(--phi-s2); }

/* ---------- Large cards ----------
   Engagements and sectors on the home page. A photograph, its own dark
   overlay, and white type that stays white in both reading modes. */
.phi-cards { display: grid; gap: var(--phi-s4); grid-template-columns: 1fr; }
@media (min-width: 46rem) { .phi-cards { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 68rem) { .phi-cards--3 { grid-template-columns: repeat(3, minmax(0,1fr)); } }

.phi-card {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 26rem; padding: var(--phi-s4); overflow: clip; isolation: isolate;
  text-decoration: none; background: var(--phi-navy-950); color: var(--phi-image-fg);
}
.phi-cards--3 .phi-card { min-height: 24rem; }
@media (min-width: 68rem) {
  .phi-card--lead { grid-column: span 2; min-height: 32rem; }
}
.phi-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2;
  filter: grayscale(.45); transform: scale(1.02);
  transition: transform var(--phi-dur-3) var(--phi-ease-out), filter var(--phi-dur-3) var(--phi-ease-out); }
.phi-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--phi-image-overlay); }
.phi-card:hover .phi-card__img, .phi-card:focus-visible .phi-card__img { transform: scale(1.06); filter: grayscale(0); }
.phi-card:focus-visible { box-shadow: 0 0 0 3px var(--phi-mint-300); }

.phi-card__top { position: absolute; top: var(--phi-s4); left: var(--phi-s4); right: var(--phi-s4);
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--phi-s3); }
.phi-card__kind { font-size: var(--phi-size--1); font-weight: 600; letter-spacing: var(--phi-tracking-label);
  text-transform: uppercase; color: var(--phi-image-accent); }
.phi-card__n { font-family: var(--phi-font-display); font-size: var(--phi-size-2); color: var(--phi-image-fg-2); }
.phi-card__year { font-size: var(--phi-size--1); color: var(--phi-image-fg-2); letter-spacing: .06em; }

.phi-card__outcome { display: flex; align-items: baseline; gap: var(--phi-s2); margin-bottom: var(--phi-s2); }
.phi-card__outcome b { font-family: var(--phi-font-display); font-weight: 400; font-size: var(--phi-size-3);
  letter-spacing: -.02em; color: var(--phi-image-fg); }
.phi-card__outcome span { font-size: var(--phi-size--1); color: var(--phi-image-fg-2); }
.phi-card__t { font-family: var(--phi-font-display); font-size: var(--phi-display-3); line-height: 1.08;
  color: var(--phi-image-fg); margin: 0; max-width: 22ch; }
.phi-card--lead .phi-card__t { font-size: var(--phi-display-2); max-width: 20ch; }
.phi-card__q { font-family: var(--phi-font-display); font-style: italic; font-size: var(--phi-size-1);
  line-height: 1.3; color: var(--phi-image-fg-2); margin: var(--phi-s2) 0 0; max-width: 34ch; }
.phi-card__d { font-size: var(--phi-size--1); color: var(--phi-image-fg-2); margin: var(--phi-s2) 0 0; max-width: 48ch; }
.phi-card__go { margin-top: var(--phi-s3); display: inline-flex; align-items: center; gap: var(--phi-s2);
  font-size: var(--phi-size--1); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--phi-image-fg); }
.phi-card__go span { display: inline-block; transition: transform var(--phi-dur-2) var(--phi-ease); }
.phi-card:hover .phi-card__go span { transform: translateX(4px); }

/* ---------- Timeline (About) ---------- */
.phi-timeline { border-top: 1px solid var(--phi-rule); }
.phi-timeline__year { display: grid; grid-template-columns: 7rem minmax(0,1fr); gap: var(--phi-s4);
  padding-block: var(--phi-s4); border-bottom: 1px solid var(--phi-rule); }
.phi-timeline__y { font-family: var(--phi-font-display); font-size: var(--phi-size-4); line-height: 1;
  color: var(--phi-text-heading); letter-spacing: -.03em; }
.phi-timeline__items { display: grid; gap: var(--phi-s3); }
.phi-timeline__item { display: block; text-decoration: none; }
.phi-timeline__item b { display: block; font-family: var(--phi-font-display); font-weight: 400;
  font-size: var(--phi-size-2); color: var(--phi-text-heading); line-height: 1.15; }
.phi-timeline__item:hover b { color: var(--phi-accent-ink); }
.phi-timeline__item span { font-size: var(--phi-size--1); color: var(--phi-text-tertiary); }
@media (max-width: 40rem) { .phi-timeline__year { grid-template-columns: 1fr; gap: var(--phi-s2); } }

/* ---------- Then / now, principles, quotes ---------- */
.phi-pairs { border-top: 1px solid var(--phi-rule); }
.phi-pairs__row { display: grid; grid-template-columns: minmax(0,1fr) 2rem minmax(0,1fr); gap: var(--phi-s3);
  align-items: baseline; padding-block: var(--phi-s3); border-bottom: 1px solid var(--phi-rule); }
.phi-pairs__a { color: var(--phi-text-tertiary); font-size: var(--phi-size-0); }
.phi-pairs__arrow { color: var(--phi-accent-ink); text-align: center; }
.phi-pairs__b { font-family: var(--phi-font-display); font-size: var(--phi-size-1); color: var(--phi-text-heading);
  /* "Internationalisation" is wider than a narrow column in Albert Sans. */
  hyphens: auto; overflow-wrap: anywhere; }
.phi-dark .phi-pairs, .phi-dark .phi-pairs__row { border-color: var(--phi-rule-dark); }
.phi-dark .phi-pairs__a { color: var(--phi-on-dark-3); }
.phi-dark .phi-pairs__arrow { color: var(--phi-on-dark-accent); }
.phi-dark .phi-pairs__b { color: var(--phi-on-dark); }

.phi-quote { margin: 0; padding: var(--phi-s4) 0; border-top: 1px solid var(--phi-rule); }
.phi-quote p { font-family: var(--phi-font-display); font-size: var(--phi-display-4); line-height: 1.3;
  color: var(--phi-text-heading); margin: 0 0 var(--phi-s2); max-width: 40ch; }
.phi-quote cite { font-style: normal; font-size: var(--phi-size--1); letter-spacing: .08em;
  text-transform: uppercase; color: var(--phi-text-tertiary); }
.phi-dark .phi-quote { border-top-color: var(--phi-rule-dark); }
.phi-dark .phi-quote p { color: var(--phi-on-dark); }
.phi-dark .phi-quote cite { color: var(--phi-on-dark-3); }

/* ---------- The construction (History) ---------- */
.phi-seq { font-family: var(--phi-font-display); font-size: var(--phi-display-4); letter-spacing: .02em;
  color: var(--phi-on-dark); margin: 0 0 var(--phi-s4); }
.phi-conv { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(12rem,100%),1fr)); }
.phi-conv > div { padding: var(--phi-s3) var(--phi-s4) var(--phi-s3) 0; border-top: 1px solid var(--phi-rule-dark); }
.phi-conv__k { font-size: var(--phi-size--1); letter-spacing: .08em; color: var(--phi-on-dark-3); }
.phi-conv__v { font-family: var(--phi-font-display); font-size: var(--phi-size-3); color: var(--phi-on-dark); letter-spacing: -.01em; }
.phi-spiral { color: var(--phi-on-dark-accent); }
.phi-spiral img { filter: invert(1); opacity: .85; }
:root[data-phibon-theme="light"] .phi-spiral img { filter: none; }

/* ---------- Accessibility pass (audit C1-C6) ----------
   Error state, dialog furniture, touch targets and the mobile
   type floor. Nothing here changes the desktop composition. */
.phi-field__err { font-size: var(--phi-size--1); font-weight: 600; color: var(--phi-danger-800);
  margin-top: var(--phi-s1); }
.phi-dark .phi-field__err, .phi-field__err.phi-on-dark { color: #FF9C93; }
.phi-field [aria-invalid="true"] { border-color: var(--phi-danger-800);
  box-shadow: inset 0 0 0 1px var(--phi-danger-800); }
.phi-form__alert { font-size: var(--phi-size--1); font-weight: 600; color: var(--phi-danger-800);
  background: var(--phi-danger-50); border-left: 2px solid var(--phi-danger-800);
  padding: var(--phi-s3); margin-bottom: var(--phi-s4); }
.phi-form__alert[hidden], .phi-field__err[hidden] { display: none; }

.phi-search__head { display: flex; align-items: center; justify-content: space-between;
  gap: var(--phi-s3); padding: var(--phi-s3) var(--phi-s4) 0; }
.phi-search__head h2 { margin: 0; color: var(--phi-text-tertiary); }
.phi-search__close { min-height: 44px; min-width: 44px; padding: 0 var(--phi-s3);
  border: 1px solid var(--phi-rule); background: none; color: var(--phi-text-secondary);
  font-family: inherit; font-size: var(--phi-size--1); font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; cursor: pointer; }
.phi-search__close:hover { background: var(--phi-chalk); color: var(--phi-text-primary); }

/* C4: touch targets. Pointer-coarse only, so the desktop rhythm of
   the hairline lists is untouched. */
@media (pointer: coarse), (max-width: 46rem) {
  .phi-link, .phi-footer a, .phi-crumbs a, .phi-header__actions .phi-navitem,
  .phi-search__hit, .phi-chip, .phi-drawer__sub, .phi-skip, .phi-header__brand,
  .phi-entry__go, .phi-card__go {
    min-height: 44px; display: inline-flex; align-items: center; }
  .phi-footer a, .phi-footer__legal a { min-width: 44px; }
  .phi-footer li { margin-bottom: 0; }
  .phi-footer__legal a, .phi-footer__legal span { min-height: 44px; display: inline-flex;
    align-items: center; }
}

/* C5: the mobile type floor. 0.786rem is 12.6px; below 46rem the
   smallest step is raised to 13.5px, which keeps the ratio intact
   between --phi-size--1 and --phi-size-0. */
@media (max-width: 46rem) {
  :root { --phi-size--1: 0.845rem; }
}

/* ---------- Design pass (audit D1-D6) ---------- */

/* D1: the CTA survives the mobile breakpoint in a shorter form. */
.phi-btn__short { display: none; }
@media (max-width: 62rem) {
  .phi-header__actions .phi-btn--cta { display: inline-flex; padding-inline: var(--phi-s3); }
  .phi-btn__long { display: none; }
  .phi-btn__short { display: inline; }
}
/* The burger loses its word before the CTA loses its place: on a phone
   the one thing that must stay reachable is the way to start. */
@media (max-width: 46rem) {
  .phi-burger { font-size: 0; gap: 0; padding-inline: var(--phi-s3); }
  .phi-burger svg { font-size: 1rem; }
  .phi-header__actions { gap: 2px; }
  .phi-header__bar { gap: var(--phi-s2); padding-inline: var(--phi-s2); }
  .phi-header__actions .phi-btn--cta { padding-inline: var(--phi-s2);
    font-size: var(--phi-size--1); }
}
@media (max-width: 22rem) {
  .phi-header__actions .phi-btn--cta { display: none; }
}

/* D2: shorter cards on a phone, and the last two engagements fold away
   behind the "all nine" link rather than adding two screens. */
@media (max-width: 46rem) {
  .phi-card, .phi-cards--3 .phi-card { min-height: 17.5rem; }
  .phi-cards--fold .phi-card--fold { display: none; }
}

/* D3: two hero buttons of equal width once they stack. */
@media (max-width: 30rem) {
  .phi-hero__cta { display: grid; grid-template-columns: 1fr; }
  .phi-hero__cta .phi-btn { justify-content: center; width: 100%; }
}

/* D4: on a phone the index number rejoins the title instead of floating
   at the top of a card it no longer measures. */
@media (max-width: 46rem) {
  .phi-card__top { position: static; margin-bottom: var(--phi-s2); }
}

/* D5: a heavier scrim where the photograph is bright. */
.phi-card--dim::after { background: var(--phi-image-overlay-strong); }

/* Hero proof and commitment lines. */
.phi-hero__note { margin: var(--phi-s4) 0 0; font-size: var(--phi-size-0);
  color: var(--phi-on-dark-accent); font-weight: 500; }
.phi-hero__proof { margin: var(--phi-s2) 0 0; font-size: var(--phi-size--1);
  color: var(--phi-on-dark-3); max-width: 52ch; }

/* D6: insights are editorial entries, not work rows with an empty
   image column. */
.phi-entries { display: grid; gap: 0; border-top: 1px solid var(--phi-rule-dark); }
.phi-entry { display: block; padding: var(--phi-s5) 0; text-decoration: none;
  border-bottom: 1px solid var(--phi-rule-dark); }
.phi-entry:hover { background: rgba(255,255,255,.02); }
.phi-entry__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--phi-s3);
  margin: 0 0 var(--phi-s3); font-size: var(--phi-size--1); color: var(--phi-on-dark-3);
  letter-spacing: .04em; }
.phi-entry__t { font-family: var(--phi-font-display); font-size: var(--phi-display-3);
  line-height: 1.1; margin: 0; max-width: 24ch; }
.phi-entry__s { margin: var(--phi-s3) 0 0; color: var(--phi-on-dark-2); max-width: 62ch; }
.phi-entry__go { display: inline-flex; align-items: center; gap: var(--phi-s2);
  margin-top: var(--phi-s3); font-size: var(--phi-size--1); font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--phi-on-dark-accent); }
.phi-entry__go span { transition: transform var(--phi-dur-2) var(--phi-ease); }
.phi-entry:hover .phi-entry__go span { transform: translateX(4px); }

/* On paper the same entry keeps the reading colours. */
.phi-section:not(.phi-dark) .phi-entries,
.phi-section:not(.phi-dark) .phi-entry { border-color: var(--phi-rule); }
.phi-section:not(.phi-dark) .phi-entry__meta { color: var(--phi-text-tertiary); }
.phi-section:not(.phi-dark) .phi-entry__t { color: var(--phi-text-primary); }
.phi-section:not(.phi-dark) .phi-entry__s { color: var(--phi-text-secondary); }
.phi-section:not(.phi-dark) .phi-entry__go { color: var(--phi-accent-ink); }
.phi-section:not(.phi-dark) .phi-entry:hover { background: var(--phi-chalk); }

/* D2 continued: the phone composition.
   Measured, not guessed. The home page was 12.8 screens at 390px; the
   cuts below are the ones that removed height without removing an
   argument. The sector card drops its "who it is for" line, which the
   sector page repeats in full two taps later. */
@media (max-width: 46rem) {
  .phi-card__t { font-size: var(--phi-display-4); }
  .phi-card--lead .phi-card__t { font-size: var(--phi-display-3); }
  .phi-card { padding: var(--phi-s3); }
  .phi-entry { padding-block: var(--phi-s4); }
  .phi-entry__t { font-size: var(--phi-display-4); max-width: none; }
  .phi-entry__s { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden; margin-top: var(--phi-s2); }
  .phi-entry__meta { gap: var(--phi-s2); margin-bottom: var(--phi-s2); }
  .phi-format ul { margin-block: var(--phi-s2); }
  .phi-disc__item { padding-block: var(--phi-s3); }
  /* The band rhythm keeps its phi ratio, one step down. */
  :root { --phi-section: var(--phi-s4); --phi-section-tight: var(--phi-s3); }
  .phi-pagehead__grid { margin-bottom: var(--phi-s4) !important; }
}

/* ---------- The partner row ----------
   Audit §5.5: no face before /about/team, on a site for a two-partner
   firm. One quiet row under the closing lede. Faces at 48px, greyscale
   like the team page, overlapping slightly so they read as a pair
   rather than a gallery. Never larger: this is a signature, not a
   section. */
.phi-cta__people {
  display: flex; align-items: center; gap: var(--phi-s3);
  margin-top: var(--phi-s4); padding-top: var(--phi-s4);
  border-top: 1px solid var(--phi-rule-dark);
  text-decoration: none; max-width: 46rem;
}
.phi-cta__faces { display: flex; flex: none; }
.phi-cta__faces img {
  width: 48px; height: 48px; object-fit: cover; object-position: center 20%;
  border-radius: 999px; filter: grayscale(1);
  border: 2px solid var(--phi-abyss);
  transition: filter var(--phi-dur-2) var(--phi-ease);
}
.phi-cta__faces img + img { margin-left: -14px; }
.phi-cta__people:hover .phi-cta__faces img { filter: grayscale(0); }
.phi-cta__said { display: block; }
.phi-cta__line {
  display: block; font-family: var(--phi-font-display); font-size: var(--phi-size-1);
  line-height: 1.32; color: var(--phi-on-dark); max-width: 38ch;
}
.phi-cta__names {
  display: inline-flex; align-items: center; gap: var(--phi-s2);
  margin-top: var(--phi-s1); font-size: var(--phi-size--1); font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--phi-on-dark-accent);
}
.phi-cta__names span { transition: transform var(--phi-dur-2) var(--phi-ease); }
.phi-cta__people:hover .phi-cta__names span { transform: translateX(4px); }
@media (max-width: 46rem) {
  .phi-cta__people { flex-direction: column; align-items: flex-start; gap: var(--phi-s3); }
  .phi-cta__line { font-size: var(--phi-size-0); }
}

/* ---------- Block head ----------
   Eyebrow on a rule, heading, one link. Replaces the heading-plus-lede
   grid on the home page: the cards under it already say what the lede
   was repeating, and removing the paragraph moves the evidence up the
   screen. The link sits on the heading's last baseline on desktop and
   drops under it on a phone. */
.phi-blockhead {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--phi-s4) var(--phi-s6); flex-wrap: wrap;
  margin-bottom: var(--phi-s5);
}
.phi-blockhead h2 { margin: 0; max-width: 20ch; }
.phi-blockhead .phi-link { flex: none; margin-bottom: .35em; }
@media (max-width: 46rem) {
  .phi-blockhead { gap: var(--phi-s3); margin-bottom: var(--phi-s4); }
  .phi-blockhead h2 { max-width: none; }
  .phi-blockhead .phi-link { margin-bottom: 0; }
}

/* With no buttons and no note under it, the hero is a statement. Let the
   sub-line breathe instead of sitting against the fold. */
.phi-hero__sub { margin-bottom: 0; }
.phi-hero .phi-hero__in > :last-child { margin-bottom: 0; }

/* Two dark bands in a row have no ground change to separate them, so the
   two full paddings read as one void rather than as a join. Tighten the
   seam; the rule stays a rule and the rhythm survives. */
.phi-dark.phi-section + .phi-dark.phi-section { padding-block-start: var(--phi-section-tight); }
.phi-dark.phi-section:has(+ .phi-dark.phi-section) { padding-block-end: var(--phi-section-tight); }

/* ---------- Seven disciplines ----------
   The grid was built for six, which fell into two rows of three. With
   seven the last cell would sit alone, so it spans the row instead: a
   full-width final cell reads as deliberate, and Strategy is the one
   that touches all the others. */
@media (min-width: 66rem) {
  .phi-disc__item:last-child:nth-child(3n + 1) { grid-column: span 3; }
  .phi-disc__item:last-child:nth-child(3n + 2) { grid-column: span 2; }
}
@media (min-width: 46rem) and (max-width: 65.99rem) {
  .phi-disc__item:last-child:nth-child(2n + 1) { grid-column: span 2; }
}
/* A cell that spans the row has to use the row. Number, title and line
   run across it instead of stacking in the first third and leaving the
   rest empty. */
@media (min-width: 46rem) {
  .phi-disc__item[style], .phi-disc__item:last-child:nth-child(3n + 1),
  .phi-disc__item:last-child:nth-child(2n + 1) {
    display: grid; grid-template-columns: 2.5rem minmax(0, 20rem) minmax(0, 1fr);
    align-items: baseline; gap: 0 var(--phi-s4);
  }
  .phi-disc__item:last-child:nth-child(3n + 1) .phi-disc__t,
  .phi-disc__item:last-child:nth-child(2n + 1) .phi-disc__t { margin: 0; }
  .phi-disc__item:last-child:nth-child(3n + 1) .phi-disc__d,
  .phi-disc__item:last-child:nth-child(2n + 1) .phi-disc__d { max-width: 52ch; }
}