/* ============================================================
   LFFO — interior page effects (shared across all pages)
   Site-wide: page-entry, top progress bar, mobile carousels,
   breathing logos, tier interactions, trust web, editorial,
   calendar framing, contact micro-moment.
   ============================================================ */

/* =========================================================
   TOP SCROLL PROGRESS BAR (all pages, all viewports)
   ========================================================= */
.scroll-progress{
  position:fixed;top:0;left:0;height:2px;width:0%;
  background:linear-gradient(90deg,var(--gold-bright),var(--gold),var(--brown));
  z-index:200;pointer-events:none;
  box-shadow:0 0 5px rgba(201,163,78,.42);
  transition:width .08s linear;
}

/* =========================================================
   PAGE-ENTRY MOMENT — interior hero (chapters of one book)
   ========================================================= */
.page-hero .breadcrumb{opacity:0;animation:peFade .6s var(--ease) .05s forwards}
.page-hero h1{opacity:0;animation:peRise .8s var(--ease) .15s forwards}
.page-hero > .container > p,
.page-hero p.ph-sub{opacity:0;animation:peRise .8s var(--ease) .3s forwards}
.page-hero .eyebrow::before{width:0;animation:peLine .7s var(--ease) .5s forwards}
@keyframes peFade{to{opacity:1}}
@keyframes peRise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes peLine{to{width:26px}}
/* The interior hero's drifting leaves are GONE — `.ph-canopy`, the overlay
   js/pages-fx.js used to build inside .page-hero and fill from
   js/leaf-fall.js, is no longer created, so its rule and the local copy of
   the `leafGust` keyframe went with it. Section 1 carries no drifting leaves
   on any page; the home hero was emptied in the same pass.

   `.page-hero{position:relative}` stays — the lit-navy wash
   (`.page-hero::before` / `::after` in css/style.css) is positioned against
   it and is what lights this section now. */
.page-hero{position:relative;overflow:hidden}
/* generic reveal used across pages */
.fx{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
@media (max-width:720px){
  .fx{transform:translateY(14px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
}
.fx.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .fx{opacity:1;transform:none;transition:none}
  .page-hero *{animation:none!important;opacity:1!important}
}

/* eyebrow draw (matches home) */
.eyebrow{position:relative}
.eyebrow::before{
  content:"";display:inline-block;width:0;height:1px;background:var(--gold);
  vertical-align:middle;margin-right:.6em;transition:width .7s var(--ease);
}
.fx.in .eyebrow::before,.in .eyebrow::before,.eyebrow.drawn::before{width:26px}

/* gilded headline underline (matches home) */
/* ── The rule under a heading ────────────────────────────────────────────────
   Not the golden divider system — that one runs the page width and separates
   two movements. This is a heading's own underscore and belongs to the
   heading, so it takes its cues from the heading and from nothing else.

   Three faults it had. It was pinned to left:0 with a fixed 2.2em width, so
   under a CENTRED heading it hung off the bottom-left corner looking detached
   from the words above it — plainly wrong on the homepage's centred section
   heads. Its length was the same 2.2em under a three-word heading and under a
   nine-word one. And at 2px with an 8px gold bloom it was heavier than the
   hairline language everything else on the site now speaks.

   Now: it inherits the heading's own text-align, so it sits under the first
   letter of a left-aligned heading and centred under a centred one; its
   length is a proportion of the heading's own measure, clamped so it can
   never look like a stray dash under a short title or a second rule under a
   long one; and it is drawn at the shared hairline weight with a soft taper
   at both ends instead of a glow. */
.gilded-head{position:relative;display:inline-block}
.gilded-head::after{
  content:"";position:absolute;bottom:-.16em;height:2px;width:0;
  left:0;right:auto;
  background:linear-gradient(90deg,var(--gold-bright),var(--gold) 62%,rgba(201,163,78,.35));
  border-radius:2px;
  transition:width 1.1s var(--ease-lux) .2s;
}
/* Centred heads: the rule grows from the centre outward, not from the left. */
.center .gilded-head::after,
.section-head.center .gilded-head::after,
[style*="text-align:center"] .gilded-head::after{
  left:50%;transform:translateX(-50%);
  background:linear-gradient(90deg,rgba(201,163,78,.35),var(--gold) 22%,var(--gold-bright) 50%,var(--gold) 78%,rgba(201,163,78,.35));
}
.fx.in .gilded-head::after,.in.gilded-head::after{width:clamp(2.2em,38%,7em)}

/* Retired alongside the home-page copy of this rule — the button's gold wipe
   (.btn::before, style.css) is now the single hover gesture. See home.css. */
.gild{position:relative}

/* =========================================================
   MEMBERSHIP — tier interactions + "which tier am I?" guide
   ========================================================= */
.tier{position:relative;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease)}
.tier .tier-head{position:relative;overflow:hidden}
.tier .tier-head::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.14) 50%,transparent 60%);
  transform:translateX(-110%);
}
.tier:hover .tier-head::after{animation:goldSweep .8s ease forwards}
.tier.tier-match{border-color:var(--gold);box-shadow:0 18px 50px rgba(201,163,78,.22);transform:translateY(-6px)}
.tier.tier-dim{opacity:.55;filter:saturate(.8)}
@keyframes goldSweep{to{transform:translateX(110%)}}

/* The "Not sure which applies to you?" chooser now lives in css/style.css.
   It had to move: index.html loads only style.css and home.css, so a
   component defined here is unstyled on the homepage — which is exactly
   what happened when the chooser was added to the membership band there.
   Anything used on more than one page belongs in the shared sheet. */

/* ── Mobile: the chooser becomes two full-width answers ──────────────────
   On a phone the two pills wrapped onto separate lines at different widths,
   which read as a broken row rather than a choice, and at .9rem in a 30px
   pill they were both small and awkward to hit. Here they become stacked,
   full-width, equal-height answer cards with a 52px target and a leading
   gold rule that fills in on selection, so the state is unmistakable at a
   glance. The card itself also loses its side padding and shadow, letting the
   question sit directly on the page instead of inside a cramped box. */

@media (prefers-reduced-motion:reduce){
  .tg-btn::before{transition:none}
}

/* =========================================================
   ABOUT — regulatory trust web
   ========================================================= */
.trustweb{position:relative;max-width:820px;margin:0 auto}
.trustweb svg{width:100%;height:auto;overflow:visible}
.tw-link{stroke:var(--gold);stroke-width:1.3;opacity:.4;
  stroke-dasharray:var(--l,300);stroke-dashoffset:var(--l,300)}
.trustweb.in .tw-link{animation:drawRoot 1.5s var(--ease) forwards}
.trustweb.in .tw-link:nth-child(2){animation-delay:.12s}
.trustweb.in .tw-link:nth-child(3){animation-delay:.24s}
.trustweb.in .tw-link:nth-child(4){animation-delay:.36s}
@keyframes drawRoot{to{stroke-dashoffset:0}}
.tw-node circle{fill:var(--white);stroke:var(--gold);stroke-width:2;opacity:0;transform:scale(0);transform-origin:center;transition:all .4s var(--ease)}
.trustweb.in .tw-node circle{opacity:1;transform:scale(1)}
.tw-hub circle{fill:var(--navy);stroke:var(--gold-bright)}
.tw-node text{fill:var(--navy);font-family:var(--sans);font-size:13px;font-weight:600;text-anchor:middle;opacity:0;transition:opacity .5s var(--ease) .3s}
.tw-hub text{fill:var(--navy);font-size:14px}
.tw-node .tw-ico{font-size:15px}
.trustweb.in .tw-node text{opacity:1}
.tw-node:hover circle{fill:var(--gold-soft)}

/* board portraits come alive */
.board-member{transition:transform .3s var(--ease)}
.bm-photo{position:relative;overflow:hidden;transition:box-shadow .3s var(--ease)}
.bm-photo::after{
  content:"";position:absolute;inset:0;background:linear-gradient(160deg,transparent,rgba(201,163,78,.18));
  opacity:0;transition:opacity .3s var(--ease);
}
.board-member:hover{transform:translateY(-6px)}
.board-member:hover .bm-photo{box-shadow:0 16px 40px rgba(15,32,56,.18)}
.board-member:hover .bm-photo::after{opacity:1}

/* ── OUR STORY — the timeline as a young tree ────────────────────────────────
   "How the association took root." The section said that in words and then
   drew a plain 2px vertical bar with four grey-gold discs on it — a generic
   timeline, on a page whose entire identity is a tree.

   It is now a stem and four leaves, and the whole idea is carried by two
   elements and one keyframe. The stem is still a single line, because
   simplicity is the point: it just tapers, warms from brown at the root to
   gold at the growing tip, and draws itself upward from the base. Each
   milestone's bullet is a real leaf out of the logo (js/leaf-shapes.js,
   injected by js/pages-fx.js), and each one arrives the way the brief asked —
   a short swing down onto its own point on the stem and a settle, not a long
   flight path.

   The refinement is in the timing, not the distance. A leaf travels about
   26px. It enters already rotated as if it has just detached, swings once
   past its resting angle, comes back, and stops. The four are staggered by
   140ms so the stem reads as growing leaf by leaf from the root upward, and
   each leaf's own delay is tied to its index so the sequence never depends on
   scroll position or on how fast the reader arrived. */
.timeline{position:relative;max-width:760px;margin:0 auto;padding-left:44px}
.timeline::before{
  content:"";position:absolute;left:10px;top:2px;bottom:2px;width:2px;
  background:linear-gradient(180deg,
    var(--gold-bright) 0%, var(--gold) 22%, var(--brown-soft) 74%, var(--brown) 100%);
  border-radius:2px;
  transform:scaleY(0);transform-origin:bottom;      /* it grows UP from the root */
  transition:transform 1.5s cubic-bezier(.32,.72,.3,1);
}
.timeline.in::before{transform:scaleY(1)}
/* The root: a small swelling where the stem meets the ground. */
.timeline::after{
  content:"";position:absolute;left:6px;bottom:-3px;width:10px;height:10px;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,var(--brown-soft),var(--brown));
  opacity:0;transform:scale(.4);
  transition:opacity .5s var(--ease),transform .6s var(--spring,cubic-bezier(.34,1.4,.64,1));
}
.timeline.in::after{opacity:1;transform:scale(1)}

.tl-item{position:relative;padding-bottom:38px}
/* The leaf sits on the stem. js/pages-fx.js puts the SVG inside .tl-leaf. */
.tl-leaf{
  position:absolute;left:-46px;top:-2px;width:30px;height:30px;
  transform-origin:50% 14%;                 /* it pivots on its stem */
  opacity:0;pointer-events:none;
  filter:drop-shadow(0 1px 2px rgba(40,30,8,.2));
}
.tl-leaf svg{width:100%;height:100%;display:block;overflow:visible}
.timeline.in .tl-leaf{
  animation:tlLeafSettle 1.15s cubic-bezier(.28,.72,.3,1) both;
  animation-delay:calc(.35s + var(--n,0) * .14s);
}
/* Down 26px, one swing past the rest angle, back, stop. Nothing more. */
/* --rest is each leaf's own resting angle, written by js/pages-fx.js, so the
   four settle at four different attitudes instead of four identical uprights. */
@keyframes tlLeafSettle{
  0%   {opacity:0;transform:translate(4px,-26px) rotate(calc(var(--rest,0deg) - 24deg))}
  22%  {opacity:1}
  58%  {transform:translate(-2px,-6px) rotate(calc(var(--rest,0deg) + 11deg))}
  80%  {transform:translate(1px,-1px) rotate(calc(var(--rest,0deg) - 5deg))}
  100% {opacity:1;transform:translate(0,0) rotate(var(--rest,0deg))}
}
.tl-item h3{font-size:1.2rem;margin-bottom:6px}
.tl-item p{font-size:.95rem}

@media (prefers-reduced-motion:reduce){
  .timeline::before{transform:scaleY(1);transition:none}
  .timeline::after{opacity:1;transform:scale(1);transition:none}
  .timeline.in .tl-leaf,.tl-leaf{animation:none;opacity:1;transform:rotate(var(--rest,0deg))}
}

/* =========================================================
   EVENTS — seasonal identity + beautiful empty states
   ========================================================= */
.evtype.season-summer-card::before{background:linear-gradient(90deg,var(--gold-deep),var(--gold-bright))}
.evtype.season-winter-card::before{background:linear-gradient(90deg,var(--navy-soft),#41618c)}
.empty-invite{
  position:relative;overflow:hidden;text-align:center;
  padding:64px 28px;border-radius:var(--radius-lg);
  background:
    radial-gradient(60% 80% at 20% 0%,rgba(201,163,78,.08),transparent 70%),
    radial-gradient(50% 70% at 100% 100%,rgba(74,157,192,.06),transparent 70%),
    var(--cream);
  border:1px solid var(--line);
}
.empty-invite .ei-leaves{position:absolute;inset:0;pointer-events:none}
.empty-invite i.ei-icon{font-size:2.8rem;color:var(--gold);margin-bottom:16px;position:relative}
.empty-invite h3{margin-bottom:10px;position:relative}
.empty-invite p{max-width:460px;margin:0 auto 22px;position:relative}
.empty-invite .btn{position:relative}

/* =========================================================
   KNOWLEDGE — featured editorial + category filter
   ========================================================= */
.kh-featured{
  display:grid;grid-template-columns:1.15fr .85fr;gap:0;
  border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line);
  background:var(--surface);margin-bottom:40px;box-shadow:var(--shadow-md);
}
.khf-media{
  position:relative;min-height:320px;
  background:linear-gradient(150deg,var(--navy),var(--navy-deep));color:#fff;
  display:flex;flex-direction:column;justify-content:space-between;padding:34px;overflow:hidden;
}
.khf-media .khf-leaf{position:absolute;top:-30px;right:-30px;width:150px;height:150px;border-radius:50% 0 50% 50%;background:rgba(201,163,78,.1);transform:rotate(20deg)}
.khf-badge{position:relative;align-self:flex-start;padding:.4em 1em;border-radius:20px;background:var(--gold);color:var(--navy);font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.khf-media h2{position:relative;color:#fff;font-size:clamp(1.6rem,2.6vw,2.3rem);margin-top:auto}
.khf-body{padding:34px;display:flex;flex-direction:column;justify-content:center}
.khf-cat{font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:12px}
.khf-body p{font-size:1rem;margin-bottom:20px}

/* On a phone the two columns collapse the title into a sliver — 'Defining
   independence in family office advisory' was breaking a word per line inside
   a ~48px panel. Below 720px the card stacks: the navy title panel sits on top
   at full width with room for the headline, the body follows beneath it. The
   panel also stops stretching to a fixed 320px and sits its content from the
   top rather than pushing the title to the bottom of a tall block. */
@media (max-width:720px){
  .kh-featured{grid-template-columns:1fr}
  .khf-media{min-height:0;padding:26px 24px 30px;justify-content:flex-start}
  .khf-media h2{margin-top:16px;font-size:clamp(1.5rem,6.4vw,2rem);line-height:1.15}
  .khf-media .khf-leaf{width:120px;height:120px;top:-24px;right:-24px}
  .khf-body{padding:26px 24px}
}

/* Unified controls bar: category filter + sort.
   Reads as a deliberate toolbar rather than loose buttons — hairline rules top
   and bottom bracket it, and the whole bar sits lower and larger than before so
   it carries the weight of being the page's primary control. */
.kh-controls{
  /* Pin offset and z-index live with the fold rules further down, which read
     the live --header-h. Two sticky declarations for one element is exactly
     how offsets drift out of step, so this one only carries layout. */
  display:block;margin-top:44px;margin-bottom:34px;
  padding:16px 20px;
  /* Cream-white console — matches the Library filter panel. */
  background:linear-gradient(180deg,#fffdf9,var(--surface-2));
  border:1px solid var(--line);border-radius:0;
  box-shadow:0 10px 24px -18px rgba(15,32,56,.20),0 1px 3px rgba(15,32,56,.05),inset 0 1px 0 rgba(255,255,255,.7);
  transition:padding .26s var(--ease),box-shadow .26s var(--ease);
}
.kh-controls::before{content:none}
.kh-controls > *{position:relative;z-index:1}

/* ── Knowledge filter buttons (were unstyled) — light pills, gold when active */
.kh-filter{display:flex;flex-wrap:wrap;gap:9px;align-items:center}
.khf-btn{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;gap:.4em;
  padding:.52em 1.02em;border-radius:0;
  border:1px solid var(--line);background:#fff;
  font-family:var(--sans);font-size:.85rem;font-weight:600;color:var(--ink-soft);line-height:1;
  cursor:pointer;white-space:nowrap;
  transition:color .2s var(--ease),border-color .2s var(--ease),background .2s var(--ease),box-shadow .2s var(--ease),transform .12s var(--ease);
}
.khf-btn > *{position:relative;z-index:1}
.khf-btn:hover{border-color:var(--gold);color:var(--navy);transform:translateY(-1px)}
.khf-btn:active{transform:translateY(0) scale(.97)}
.khf-btn:focus-visible{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,163,78,.2)}
/* Selected = subtle gold, not a solid gold fill: a faint warm tint, a gold
   keyline and gold text. The gold reads clearly but stays quiet. */
.khf-btn.active{
  background:rgba(201,163,78,.12);border-color:var(--gold);color:var(--gold-deep);
  box-shadow:inset 0 0 0 1px rgba(201,163,78,.38);
}
.khf-members .khf-lock{font-size:.95em;color:var(--brown);opacity:.85}
.khf-btn.active .khf-lock{color:var(--gold-deep)}
/* Colour-coded category dot (mirrors the Library chips) so each category reads
   at a glance and the dot matches the colour its cards carry. */
.khf-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--d,var(--gold-deep));flex:0 0 auto}
.khf-dot-all{background:conic-gradient(var(--leaf-green),var(--leaf-sky),var(--leaf-amber),var(--leaf-blue),var(--leaf-orange),var(--leaf-red),var(--leaf-green))}
.khf-btn.active .khf-dot{box-shadow:0 0 0 2px rgba(201,163,78,.28)}

/* Members control — a quiet, static gold keyline on hover instead of the old
   moving perimeter glow (removed entirely). */
.khf-members:hover{border-color:var(--gold);box-shadow:inset 0 0 0 1px rgba(201,163,78,.35)}

/* The Knowledge Hub console folds exactly as the Library's does — same pin,
   same hover-to-open, same absence of any handle. See the long note in
   css/library.css for why the button had to go. */
.kh-controls{
  position:sticky;top:calc(var(--header-h,74px) + 10px);z-index:30;
  transition:top .42s var(--ease-lux),padding .3s var(--ease-lux),box-shadow .3s var(--ease-lux);
}
@media (max-width:900px){ .kh-controls{top:calc(var(--header-h,74px) + 6px)} }
.kh-panel{
  display:grid;grid-template-rows:1fr;
  transition:grid-template-rows .34s var(--ease-lux),opacity .22s var(--ease);
}
.kh-panel-inner{
  overflow:hidden;min-height:0;transform:translateY(0);opacity:1;
  transition:transform .34s var(--ease-lux),opacity .24s var(--ease);
}
#khConsole.pinned{padding-top:10px;padding-bottom:10px;box-shadow:0 8px 20px -12px rgba(15,32,56,.22),0 1px 3px rgba(15,32,56,.05)}
#khConsole.pinned .kh-panel{grid-template-rows:0fr;opacity:0}
#khConsole.pinned .kh-panel-inner{transform:translateY(-6px);opacity:0}
#khConsole.pinned .kh-bar{margin-top:0;padding-top:0;border-top-color:transparent}
#khConsole.pinned:hover,
#khConsole.pinned:focus-within,
#khConsole.pinned.touch-open{
  padding-top:clamp(14px,2vw,22px);padding-bottom:clamp(14px,2vw,22px);
  box-shadow:0 14px 30px -16px rgba(15,32,56,.26),0 2px 5px rgba(15,32,56,.06);
}
#khConsole.pinned:hover .kh-panel,
#khConsole.pinned:focus-within .kh-panel,
#khConsole.pinned.touch-open .kh-panel{grid-template-rows:1fr;opacity:1}
#khConsole.pinned:hover .kh-panel-inner,
#khConsole.pinned:focus-within .kh-panel-inner,
#khConsole.pinned.touch-open .kh-panel-inner{transform:translateY(0);opacity:1}
#khConsole.pinned:hover .kh-bar,
#khConsole.pinned:focus-within .kh-bar,
#khConsole.pinned.touch-open .kh-bar{margin-top:12px;padding-top:12px;border-top-color:var(--line)}
#khConsole::after{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--gold-bright);transform:scaleX(0);transform-origin:left center;
  transition:transform .3s var(--ease-lux);pointer-events:none;
}
#khConsole.has-filters::after{transform:scaleX(1)}
@media (max-height:520px){
  .kh-controls{position:relative;top:auto}
  #khConsole.pinned .kh-panel{grid-template-rows:1fr;opacity:1}
  #khConsole.pinned .kh-panel-inner{transform:none;opacity:1}
}
@media (prefers-reduced-motion:reduce){
  .kh-panel,.kh-panel-inner,.kh-controls,#khConsole::after{transition:none}
  #khConsole.pinned .kh-panel-inner{transform:none}
}

/* ═══ MOBILE — button-summoned bottom sheet (see css/library.css note) ═══ */
@media (max-width:760px){
  .kh-controls{position:static;top:auto;margin-top:28px;margin-bottom:26px;padding:13px 15px;
    box-shadow:0 6px 18px -10px rgba(15,32,56,.28),inset 0 1px 0 rgba(255,255,255,.7)}
  #khConsole.pinned{padding:13px 15px;box-shadow:0 6px 18px -10px rgba(15,32,56,.28)}
  #khConsole.pinned .kh-panel{grid-template-rows:1fr;opacity:1}
  #khConsole.pinned .kh-panel-inner{transform:none;opacity:1}
  #khConsole.pinned .kh-bar{margin-top:12px;padding-top:12px;border-top-color:var(--line)}
  #khConsole::after{display:none}

  body.fc-sheet-open #khConsole{
    position:fixed;left:0;right:0;bottom:0;top:auto;z-index:200;margin:0;
    max-height:82vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
    border-radius:18px 18px 0 0;border-bottom:none;padding:8px 18px 22px;
    box-shadow:0 -14px 44px rgba(8,17,33,.34);
    animation:fcSheetUp .32s var(--ease-lux);
  }
}
.kh-bar{display:flex;align-items:center;justify-content:space-between;gap:14px 20px;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
/* Knowledge bar controls — light (these had no base styling before) */
.kh-count{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--ink-soft)}
.kh-count #khCount{color:var(--brown);font-weight:700;font-size:1.05rem}
.kh-sort{display:flex;align-items:center;gap:10px}
.kh-sort-label{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.kh-select-wrap{position:relative;display:inline-flex;align-items:center}
.kh-select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  padding:.5em 2.2em .5em .9em;border:1px solid var(--line);border-radius:var(--radius);
  background:#fff;color:var(--ink);font-family:var(--sans);font-size:.85rem;font-weight:600;cursor:pointer;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.kh-select:hover,.kh-select:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,163,78,.14)}
.kh-select-chev{position:absolute;right:.7em;pointer-events:none;color:var(--brown);font-size:1.05em}
.kh-select option{color:#12243f;background:#fff}
.kh-bar-left{display:flex;align-items:center;gap:14px;min-width:0}

/* Active-filter chips (shared: Library + Knowledge Hub) */
.lib-active,.kh-active{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.lib-active[hidden],.kh-active[hidden]{display:none}
.lib-achip{
  display:inline-flex;align-items:center;gap:6px;
  padding:.34em .34em .34em .72em;border-radius:var(--radius);
  background:var(--gold-soft);border:1px solid rgba(201,163,78,.45);
  color:var(--brown);font-family:var(--sans);font-size:.75rem;font-weight:600;
  cursor:pointer;line-height:1;
  transition:background .18s var(--ease),border-color .18s var(--ease),transform .1s var(--ease);
}
.lib-achip i{font-size:.95em;width:1.35em;height:1.35em;display:inline-flex;align-items:center;justify-content:center;border-radius:4px;background:rgba(201,163,78,.2)}
.lib-achip:hover{background:rgba(201,163,78,.22);border-color:var(--gold)}
.lib-achip:active{transform:scale(.96)}
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── Regulatory cards — STATIC (flip removed) ────────────────────────────
   The flip had no working transform and broke on touch (it still read "Hover
   for more" on a phone). Cards now show everything at once: mark, name,
   subtitle, then the full description under a hairline. Works at every width. */
.reg-grid .flip-card{
  background:var(--surface);border:1px solid var(--line);
  padding:26px 24px;display:flex;flex-direction:column;cursor:default;
}
.reg-grid .flip-inner{display:flex;flex-direction:column;gap:12px;height:auto;transform:none}
.reg-grid .flip-front{display:flex;flex-direction:column;gap:8px}
.reg-grid .flip-front .reg-icon{
  width:50px;height:50px;background:var(--navy);color:var(--gold);
  display:flex;align-items:center;justify-content:center;font-size:1.4rem;margin-bottom:4px;
}
.reg-grid .flip-front h3{font-size:1.2rem;margin:0}
.reg-grid .flip-front p{font-size:.9rem;color:var(--ink-soft);margin:0}
.reg-grid .flip-hint{display:none}
.reg-grid .flip-back{border-top:1px solid var(--line);padding-top:14px;margin-top:2px}
.reg-grid .flip-back h3{display:none}
.reg-grid .flip-back p{font-size:.92rem;line-height:1.62;color:var(--ink);margin:0}

/* === BEGIN generated: touch-life hover mirror (tools/mirror_hover.py) === */
/* Touch devices only. js/touch-life.js adds .tl-on to a component
   while it sits in the middle band of the screen, so scrolling is the
   gesture that a pointer cannot make. Do not edit by hand. */
.tier.tl-on .tier-head::after{animation:goldSweep .8s ease forwards}
.tw-node.tl-on circle{fill:var(--gold-soft)}
.board-member.tl-on{transform:translateY(-6px)}
.board-member.tl-on .bm-photo{box-shadow:0 16px 40px rgba(15,32,56,.18)}
.board-member.tl-on .bm-photo::after{opacity:1}
/* === END generated: touch-life hover mirror === */