/* ==========================================================================
   LUMINA — team.css
   Everything on team.html. There is no inline <style> on that page and
   no second stylesheet of its own, on purpose.

   2026-08-13 — the named roster came out, and with it every statement
   of how large the firm is.

   The page used to carry one person card per advisor, each the shared
   property card (.prop-float → .depth → .lev → .card) wearing a monogram
   plate. Removing the names would have left a row of cards with a role
   and a blank disc where the initials were, which reads as a page with
   its content missing rather than a page that chose not to name anyone.
   So the cards went, and what they carried — which mandates the firm
   holds, and how they group — is now a ledger of roles.

   Nothing on this page counts anything: no headcount, no seat totals,
   no numbered rows. If a count is ever added back, add it here too, or
   the next person will strip it out again without knowing why.

   Two consequences worth knowing:

   - team.html no longer loads css/property-ui.css, property-card.js or
     property-viewer.js. Nothing on the page matches a selector or needs
     a behaviour from any of them. That is ~53KB this page stopped
     fetching, and it is why the reduced-motion block at the foot of
     this file now has to answer for everything: property-ui.css used to
     cover the card reveal and the levitation, and it is not there.
   - This file therefore owns every token it uses. .tm-scope carries the
     palette that .grid-props / .prop-float used to supply.

   If the names come back: re-add the two script tags and the
   property-ui.css link, and lift the card block out of git history —
   it was removed whole, in one commit, for exactly that reason.

   Hover states are gated behind (hover: hover) and (pointer: fine)
   throughout. Nothing is hidden behind them; on a touch device an
   ungated :hover latches on tap and leaves one panel lit as though it
   had been selected.
   ========================================================================== */

.tm-scope {
  --lum-ink: #05070B;
  --lum-navy: #0B1018;
  --lum-navy-2: #121A24;
  --lum-navy-3: #1A2431;
  --lum-cream: #F7F2E9;
  --lum-gold: #FFB25A;
  --lum-gold-lt: #FFE0B0;
  --lum-c-70: rgba(247, 242, 233, .72);
  --lum-c-52: rgba(247, 242, 233, .54);
  --lum-c-38: rgba(247, 242, 233, .40);
  --lum-hair: rgba(247, 242, 233, .11);
  --lum-display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --lum-sans: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --lum-ease: cubic-bezier(.22, .68, .16, 1);
  --lum-r: 18px;
}

body.tm-body { background: #05070B; color: #F7F2E9; }

/* ==========================================================================
   REVEAL
   .rv is the marker js/team.js observes; it adds .in when the element
   comes into view. .rv itself is styleless — the class is a hook shared
   with the rest of the site, and .tm-rv is what this page dresses it
   with. Both go on the same element.
   ========================================================================== */

.tm-rv {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  filter: blur(6px);
  transition: opacity .95s var(--lum-ease),
              transform .95s var(--lum-ease),
              filter .95s var(--lum-ease);
  transition-delay: var(--rvd, 0ms);
}

.tm-rv.in { opacity: 1; transform: none; filter: none; }

/* A headline line rising out of a clipped box.

   The .rv marker goes on the WRAPPER, not on the line. The line starts
   translated 108% down, which puts it entirely outside the wrapper's
   overflow:hidden box — so an IntersectionObserver watching the line
   itself measures an intersection of zero, never fires, and the
   headline stays invisible forever. The wrapper is always in flow and
   always measurable. */
.tm-lw { display: block; overflow: hidden; padding-bottom: .08em; }

.tm-line {
  display: block;
  opacity: 0;
  transform: translate3d(0, 108%, 0);
  transition: opacity .9s var(--lum-ease), transform 1.05s var(--lum-ease);
  transition-delay: var(--rvd, 0ms);
}

.tm-lw.in .tm-line { opacity: 1; transform: none; }

/* ==========================================================================
   HERO
   Lifted out of team.html's inline <style> so the whole page reads from
   one file. The plate is its own element rather than a background on the
   section, because a background-position drift is a paint and a
   transform on an element is not.
   ========================================================================== */

/* The layers stack with positive z-index, not negative. `isolation`
   makes .tm-hero a stacking context, and a negative z-index child of a
   stacking context paints *behind that element's own background* — the
   ink fill below would have hidden the photograph completely. */
.tm-hero {
  position: relative;
  padding: 190px 0 88px;
  overflow: hidden;
  background: var(--lum-ink);
  isolation: isolate;
}

.tm-hero > .container { position: relative; z-index: 2; }

.tm-hero-bg {
  position: absolute;
  inset: -4%;
  z-index: 0;
  /* Not assets/images/hero-luxury-villa.jpg, which this page used to
     point at: that file is a flat navy-to-gold gradient placeholder,
     not a photograph, so the hero read as mud under the veil.
     hero-lumina.jpg is the client's own supplied render — warm, amber
     lit, already cropped free of the baked-in UI (see CLAUDE.md) and
     unused since the pod hero replaced it on the landing page. */
  background: url('../assets/hero-lumina.jpg') center 46% / cover no-repeat;
  transform: scale(1.06);
  animation: tm-drift 34s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes tm-drift {
  from { transform: scale(1.06) translate3d(-1.1%, -.6%, 0); }
  to   { transform: scale(1.13) translate3d(1.1%,  .6%, 0); }
}

.tm-hero-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(78% 62% at 22% 34%, rgba(255, 178, 90, .13), transparent 62%),
    linear-gradient(180deg, rgba(5, 7, 11, .58) 0%, rgba(5, 7, 11, .90) 64%, rgba(5, 7, 11, .99) 100%);
}

.tm-hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 3;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 178, 90, .55), transparent);
}

.tm-hero .label {
  font-family: var(--lum-sans);
  color: var(--lum-c-38);
  font-size: .62rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  margin: 0;
}

.tm-hero h1 {
  font-family: var(--lum-display);
  font-size: clamp(2.4rem, 5.4vw, 4.2rem);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -.02em;
  color: var(--lum-cream);
  margin: 18px 0 0;
  max-width: 16ch;
}

.tm-hero h1 em {
  font-style: normal;
  color: rgba(247, 242, 233, .44);
}

.tm-hero .tm-lede {
  font-family: var(--lum-sans);
  color: var(--lum-c-52);
  font-size: 1.02rem;
  line-height: 1.9;
  font-weight: 300;
  max-width: 620px;
  margin: 22px 0 0;
}

/* Three warm facts under the lede. Not statistics — each one is
   already stated as fact elsewhere on the site. */
.tm-hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 34px;
  margin-top: 34px;
}

.tm-fact {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--lum-sans);
}

.tm-fact b {
  font-family: var(--lum-display);
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1;
  color: var(--lum-gold);
  text-shadow: 0 0 24px rgba(255, 178, 90, .28);
}

.tm-fact span {
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--lum-c-38);
}

/* ==========================================================================
   SECTION SHELLS
   ========================================================================== */

.tm-how,
.tm {
  background: var(--lum-ink);
  position: relative;
}

.tm-how { padding: 92px 0 78px; }
.tm { padding: 88px 0 104px; overflow: hidden; }

/* The same warm bloom the landing page puts behind its panels. */
.tm::before {
  content: '';
  position: absolute;
  top: -220px;
  left: 50%;
  width: 1000px;
  height: 620px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(255, 178, 90, .09) 0%, transparent 66%);
  pointer-events: none;
}

.tm-inner { position: relative; z-index: 1; }

.tm-sec-head h2 {
  font-family: var(--lum-display);
  font-size: clamp(1.8rem, 3.4vw, 2.7rem);
  font-weight: 400;
  color: var(--lum-cream);
  margin: 0 0 14px;
  line-height: 1.15;
  letter-spacing: -.01em;
}

.tm-sec-head p {
  font-family: var(--lum-sans);
  color: var(--lum-c-52);
  font-size: .98rem;
  line-height: 1.92;
  max-width: 640px;
  margin: 0;
}

/* ==========================================================================
   HOW WE WORK
   ========================================================================== */

.tm-how-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(252px, 1fr));
  gap: 1px;
  margin-top: 48px;
  background: var(--lum-hair);
  border: 1px solid var(--lum-hair);
  border-radius: var(--lum-r);
  overflow: hidden;
}

.tm-principle {
  position: relative;
  background: var(--lum-navy);
  padding: 36px 30px 34px;
  transition: background-color .6s var(--lum-ease);
}

.tm-principle::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(120% 100% at 50% 0%, rgba(255, 178, 90, .11), transparent 70%);
  transition: opacity .6s var(--lum-ease);
}

/* A gold edge that draws down the left as you hover. transform only. */
.tm-principle::after {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--lum-gold), rgba(255, 178, 90, 0));
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform .7s var(--lum-ease);
}

/* Gated. Ungated, a tap on a phone latches the hover state on and it
   stays lit until something else is touched — so one panel out of three
   sits permanently highlighted, which reads as a selection the visitor
   did not make. Nothing is hidden behind this: the numeral, the title
   and the text are all fully legible at rest. */
@media (hover: hover) and (pointer: fine) {
  .tm-principle:hover::before { opacity: 1; }
  .tm-principle:hover::after  { transform: scaleY(1); }
  .tm-principle:hover .tm-principle-n { transform: translateX(4px); }
}

.tm-principle-n {
  display: block;
  position: relative;
  font-family: var(--lum-display);
  font-size: 1.2rem;
  line-height: 1;
  color: var(--lum-gold);
  margin-bottom: 18px;
  transition: transform .6s var(--lum-ease);
}

.tm-principle h3 {
  position: relative;
  font-family: var(--lum-display);
  font-size: 1.28rem;
  font-weight: 400;
  color: var(--lum-cream);
  margin: 0 0 11px;
  line-height: 1.25;
}

.tm-principle p {
  position: relative;
  font-family: var(--lum-sans);
  font-size: .88rem;
  line-height: 1.85;
  color: var(--lum-c-52);
  margin: 0;
}

/* ==========================================================================
   TIERS
   ========================================================================== */

.tm-tier { margin-top: 54px; }
.tm-tier:first-of-type { margin-top: 42px; }

.tm-tier-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.tm-tier-head h3 {
  flex-shrink: 0;
  font-family: var(--lum-sans);
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--lum-gold);
  margin: 0;
}

.tm-tier-head span {
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 178, 90, .34), transparent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.4s var(--lum-ease) .18s;
}

.tm-tier-head.in span { transform: scaleX(1); }

/* A seat count used to sit at the far end of each rule. Removed
   2026-08-13 with everything else that stated the size of the firm; the
   rule now runs the full width and the tier name carries the line on its
   own. */

/* ==========================================================================
   THE SEATS

   What used to be here: one person card per advisor, each the shared
   property card shell (.prop-float → .depth → .lev → .card) dressed with a
   monogram plate, a turning ring, a cast shadow and three contact pills.
   Removed 2026-08-13 — no names on the site for now. The whole block is
   in git if it comes back; nothing else on the page depended on it, and
   team.html no longer loads css/property-ui.css at all.

   What replaced it is a ledger of mandates. A row is a role, so the page
   states the shape of the desk without claiming anything about who is
   sitting in it or how many of them there are, and a name later drops
   into a row without moving anything else.

   The panel is built exactly like .tm-how-grid above — 1px gaps over a
   hairline background, one border, one radius, overflow clipped — and
   the hover language is the principle's, at row scale. Two sections that
   share a palette but not a grammar read as two pages; this is one.
   ========================================================================== */

.tm-seats {
  display: grid;
  gap: 1px;
  background: var(--lum-hair);
  border: 1px solid var(--lum-hair);
  border-radius: var(--lum-r);
  overflow: hidden;
}

.tm-seat {
  position: relative;
  display: grid;
  grid-template-columns: 26px 1fr;
  align-items: baseline;
  column-gap: 20px;
  padding: 26px 30px;
  background: var(--lum-navy);
  transition: background-color .6s var(--lum-ease);
}

.tm-seat::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(120% 100% at 8% 0%, rgba(255, 178, 90, .10), transparent 66%);
  transition: opacity .6s var(--lum-ease);
}

.tm-seat::after {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--lum-gold), rgba(255, 178, 90, 0));
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform .7s var(--lum-ease);
}

/* This column held a roman numeral — i, ii, iii … vii — which was a
   headcount written in a nicer typeface, and the whole point of
   2026-08-13 is that the page states no headcount at all. An ornament
   keeps the column rhythm the rows were tuned around and counts nothing.

   Drawn rather than typed: a rotated square, not a ◆ glyph. Instrument
   Serif has no geometric-shape coverage, so a glyph would fall through
   to whatever the system happened to supply and land at a different
   size and weight on every machine. */
.tm-seat-mark {
  position: relative;
  justify-self: end;
  align-self: start;
  width: 7px;
  height: 7px;
  /* pushed onto the title's optical centre line rather than its box top */
  margin-top: .62em;
  transform: rotate(45deg);
  background: linear-gradient(135deg, var(--lum-gold-lt), var(--lum-gold));
  box-shadow: 0 0 18px rgba(255, 178, 90, .5);
  transition: transform .6s var(--lum-ease), box-shadow .6s var(--lum-ease);
}

.tm-seat h4 {
  position: relative;
  font-family: var(--lum-display);
  font-size: 1.24rem;
  font-weight: 400;
  line-height: 1.3;
  color: var(--lum-cream);
  margin: 0 0 9px;
}

.tm-seat p {
  position: relative;
  font-family: var(--lum-sans);
  font-size: .88rem;
  line-height: 1.85;
  color: var(--lum-c-52);
  margin: 0;
}

/* Wide: the row opens out into three columns instead of stacking the
   descriptor under the title.

   Stacked, a 1,182px row carries a 50-character sentence and then about
   700px of nothing, twice per tier — the panel reads as mostly empty
   even though every row is full. Side by side, the titles form a column
   you can run an eye down, the descriptors form another, and the rows
   lose about 20px of height each.

   `display: contents` on the wrapper promotes h4 and p to grid items so
   they take columns 2 and 3 directly. It is the only reason that div
   exists at all — below 900px they need to be one stacked unit again,
   and this puts them back without a second markup shape.

   The title column is sized in px, not in %. At 32% it came to 242px of
   usable width on a 1024 screen and broke "Sales Manager · Co-Founder"
   across two lines while the row beside it sat empty — the longest title
   here needs about 250px, and that number does not scale with the
   viewport the way a percentage does. */
@media (min-width: 900px) {
  .tm-seat { grid-template-columns: 26px minmax(250px, 320px) minmax(0, 1fr); }
  .tm-seat > div { display: contents; }
  .tm-seat h4 { margin: 0; padding-right: 24px; }
  /* Nudged onto the title's baseline: the two are different faces at
     different sizes, so grid's baseline alignment lands the sans a
     touch high. */
  .tm-seat p { max-width: 58ch; padding-top: .1em; }
}

/* Same gate, same reason as .tm-principle. */
@media (hover: hover) and (pointer: fine) {
  .tm-seat:hover::before { opacity: 1; }
  .tm-seat:hover::after  { transform: scaleY(1); }
  .tm-seat:hover .tm-seat-mark {
    transform: rotate(45deg) scale(1.24);
    box-shadow: 0 0 26px rgba(255, 178, 90, .8);
  }
}

/* A quiet answer to the obvious question, rather than leaving the absence
   of names to read as an oversight. */
.tm-note {
  font-family: var(--lum-sans);
  font-size: .86rem;
  line-height: 1.9;
  color: var(--lum-c-38);
  max-width: 620px;
  margin: 34px 0 0;
  padding-left: 18px;
  border-left: 1px solid rgba(255, 178, 90, .30);
}

/* ==========================================================================
   CLOSING
   ========================================================================== */

.tm-close {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--lum-hair);
  border-radius: var(--lum-r);
  background: linear-gradient(150deg, var(--lum-navy-2), var(--lum-navy) 74%);
  box-shadow: 0 42px 84px -30px rgba(0, 0, 0, .9);
  padding: 48px 40px;
  margin-top: 62px;
  text-align: center;
}

.tm-close::before {
  content: '';
  position: absolute;
  top: -160px;
  left: 50%;
  width: 620px;
  height: 320px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(255, 178, 90, .13), transparent 68%);
  pointer-events: none;
}

.tm-close h3 {
  position: relative;
  font-family: var(--lum-display);
  font-size: clamp(1.55rem, 3vw, 2.15rem);
  font-weight: 400;
  color: var(--lum-cream);
  margin: 0 0 12px;
}

.tm-close p {
  position: relative;
  font-family: var(--lum-sans);
  font-size: .9rem;
  line-height: 1.85;
  color: var(--lum-c-52);
  max-width: 560px;
  margin: 0 auto 26px;
}

.tm-close .btn-gold {
  position: relative;
  background: var(--lum-gold);
  border-color: var(--lum-gold);
  color: #0A0E14;
  border-radius: 999px;
  font-family: var(--lum-sans);
  letter-spacing: .18em;
  transition: background .4s var(--lum-ease), transform .3s var(--lum-ease);
}

.tm-close .btn-gold:hover {
  background: var(--lum-gold-lt);
  border-color: var(--lum-gold-lt);
  transform: translateY(-2px);
}

/* ==========================================================================
   WHATSAPP FLOAT
   The pill was only ever declared inside listings.html's inline
   <style>, so every other page using this markup fell back to the round
   green base button with its label overflowing. It belongs in style.css
   eventually, next to the base .whatsapp-float.
   ========================================================================== */

.whatsapp-float.advisor-float {
  width: auto;
  height: 52px;
  padding: 0 18px;
  gap: 10px;
  border-radius: 999px;
  background: #FFB25A;
  color: #0A0E14;
  box-shadow: 0 10px 36px rgba(0, 0, 0, .45);
  font-family: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: transform .3s cubic-bezier(.22, .68, .16, 1),
              background-color .3s cubic-bezier(.22, .68, .16, 1),
              box-shadow .3s cubic-bezier(.22, .68, .16, 1);
}

.whatsapp-float.advisor-float:hover {
  background: #FFE0B0;
  box-shadow: 0 14px 44px rgba(0, 0, 0, .55);
  transform: translateY(-2px);
}

.whatsapp-float.advisor-float svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
  flex-shrink: 0;
}

/* ==========================================================================
   NARROW
   ========================================================================== */

@media (max-width: 860px) {
  .tm-hero { padding: 148px 0 66px; }
  .tm { padding: 66px 0 82px; }
  .tm-how { padding: 68px 0 60px; }
  .tm-hero-facts { gap: 12px 26px; margin-top: 28px; }
  .tm-fact b { font-size: 1.35rem; }

  /* Nothing below 11.5px on a phone — the floor the mobile pass set.
     These are all uppercase and tracked, which is where it bites: at
     9.3px with .26em of letter-spacing they turn into smudges. */
  .tm-hero .label,
  .tm-tier-head h3,
  .tm-fact span { font-size: .72rem; }

  .tm-seat { padding: 24px 22px; column-gap: 16px; }
  .tm-close .btn-gold { font-size: .74rem; }
  .whatsapp-float.advisor-float {
    height: 46px;
    padding: 0 14px;
    font-size: .62rem;
  }
}

@media (max-width: 560px) {
  .tm-close { padding: 34px 24px; }

  /* The numeral drops above the title rather than beside it. A 56px
     column plus a 16px gap is a quarter of a 320px screen spent on four
     characters, and it forces "Customer Relations Officer" to wrap
     three times. */
  .tm-seat {
    grid-template-columns: 1fr;
    row-gap: 10px;
    padding: 22px 20px;
  }

  /* Left-aligned above the title, where it reads as a bullet opening the
     row rather than a mark hanging off nothing. */
  .tm-seat-mark { justify-self: start; margin-top: 4px; }

  .tm-note { margin-top: 26px; padding-left: 14px; }
}

/* ==========================================================================
   REDUCED MOTION
   This page no longer loads property-ui.css, so nothing else is covering
   it — everything animated on team.html is declared in this file and has
   to be answered here.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .tm-hero-bg { animation: none; transform: scale(1.06); }

  .tm-rv,
  .tm-line {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
  }

  /* Anything that draws itself in is shown already drawn, not hidden —
     these are edges and rules, and their absence would read as a
     rendering fault rather than as restraint. */
  .tm-tier-head span { transform: scaleX(1); }
  .tm-principle::after,
  .tm-seat::after { transform: scaleY(1); }

  .tm-principle,
  .tm-principle::before,
  .tm-principle-n,
  .tm-seat,
  .tm-seat::before,
  .tm-seat-mark,
  .tm-close .btn-gold,
  .whatsapp-float.advisor-float {
    transition-duration: .01ms !important;
  }
}