/* Lyons Wealth — PH · Core beliefs (ph_beliefs)
   Source: flexible_css.css (Philosophy design). Loaded only on pages that use this layout.
   Every selector is scoped (.pho.pho-beliefs); nothing is global. */

.pho.pho-beliefs { position:relative; background:var(--paper); }
.pho.pho-beliefs .beliefs__intro { padding-top:clamp(80px,11vh,130px); padding-bottom:clamp(36px,5vh,56px); }
.pho.pho-beliefs .beliefs__intro .head { margin-bottom:0; }

/* sticky index (top = site header height) */
.pho.pho-beliefs .beliefs__index { position:sticky; top:var(--lw-sticky-top,80px); z-index:30; background:rgba(251,248,240,.92); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid rgba(22,40,59,.08); }
.pho.pho-beliefs .beliefs__index ol { list-style:none; display:flex; justify-content:center; gap:clamp(4px,1.6vw,26px); max-width:1240px; margin:0 auto; padding:0 var(--pad); overflow-x:auto; scrollbar-width:none; }
.pho.pho-beliefs .beliefs__index ol::-webkit-scrollbar { display:none; }
.pho.pho-beliefs .beliefs__index a { position:relative; display:flex; align-items:center; gap:10px; padding:18px 6px; white-space:nowrap; font-size:12px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; color:#6A7886; }
.pho.pho-beliefs .beliefs__index a span { font-family:var(--serif); font-style:italic; font-size:16px; letter-spacing:0; text-transform:none; color:var(--golddeep); }
.pho.pho-beliefs .beliefs__index a::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--golddeep); transform:scaleX(0); transition:transform .45s var(--ease); }
.pho.pho-beliefs .beliefs__index a:hover, .pho.pho-beliefs .beliefs__index a.is-active { color:var(--navy); }
.pho.pho-beliefs .beliefs__index a.is-active::after { transform:scaleX(1); }

/* belief rows */
.pho.pho-beliefs .belief { scroll-margin-top:150px; padding:clamp(70px,10vh,120px) 0; border-bottom:1px solid rgba(22,40,59,.08); }
.pho.pho-beliefs .belief:last-child { border-bottom:0; }
.pho.pho-beliefs .belief__row { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(40px,6vw,100px); align-items:center; }
.pho.pho-beliefs .belief--flip .belief__media { order:2; }
.pho.pho-beliefs .belief__text { position:relative; max-width:520px; }
.pho.pho-beliefs .belief--flip .belief__text { justify-self:end; }
.pho.pho-beliefs .belief__num { position:absolute; top:-0.42em; right:-0.06em; font-family:'Cormorant Garamond', Georgia, serif; font-weight:300; font-size:clamp(120px,14vw,210px); line-height:1; color:transparent; -webkit-text-stroke:1px rgba(201,154,46,.4); pointer-events:none; user-select:none; z-index:0; }
.pho.pho-beliefs .belief__label { position:relative; display:flex; align-items:center; gap:14px; }
.pho.pho-beliefs .belief__label img { width:40px; height:40px; object-fit:contain; }
.pho.pho-beliefs .belief__label span { font-size:11px; letter-spacing:.26em; text-transform:uppercase; font-weight:700; color:var(--goldink); }
.pho.pho-beliefs .belief__title { position:relative; margin-top:22px; font-family:var(--serif); font-weight:400; font-size:clamp(32px,3.6vw,44px); line-height:1.06; color:var(--navy); text-wrap:balance; }
.pho.pho-beliefs .belief__title em { font-style:italic; color:var(--golddeep); }
.pho.pho-beliefs .belief__body { position:relative; margin-top:20px; font-size:16.5px; line-height:1.8; color:var(--bodyd); text-wrap:pretty; }
.pho.pho-beliefs .belief__source { position:relative; margin-top:26px; padding-left:22px; border-left:2px solid var(--gold); font-family:var(--serif); font-style:italic; font-size:clamp(16px,1.7vw,18px); line-height:1.5; color:var(--navy); }
.pho.pho-beliefs .belief__source cite { display:block; margin-top:10px; font-family:var(--sans); font-style:normal; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; font-weight:700; color:#7A8896; }

.pho.pho-beliefs .belief__media { position:relative; }
.pho.pho-beliefs .belief__frame { position:relative; }
.pho.pho-beliefs .belief__frame::before { content:""; position:absolute; inset:16px -16px -16px 16px; border:1px solid rgba(201,154,46,.4); border-radius:6px; transition:inset .9s var(--ease); }
.pho.pho-beliefs .belief--flip .belief__frame::before { inset:16px 16px -16px -16px; }
.pho.pho-beliefs .belief__img { position:relative; display:block; width:100%; aspect-ratio:5/4; border-radius:6px; overflow:hidden; background:#E6E2D6; box-shadow:0 34px 70px -40px rgba(22,40,59,.45); }
.pho.pho-beliefs .belief__img > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* visual: number panel */
.pho.pho-beliefs .panel { position:relative; overflow:hidden; border-radius:6px; padding:clamp(36px,4vw,56px); background:var(--navy); color:#fff; min-height:100%; display:flex; flex-direction:column; justify-content:center; }
.pho.pho-beliefs .panel::before { content:""; position:absolute; inset:0; background:radial-gradient(60% 70% at 100% 0%,rgba(255,196,81,.18),transparent 70%); pointer-events:none; }
.pho.pho-beliefs .panel > * { position:relative; }
.pho.pho-beliefs .panel__k { font-size:11px; letter-spacing:.26em; text-transform:uppercase; font-weight:700; color:var(--gold); }
.pho.pho-beliefs .panel__big { display:flex; align-items:baseline; gap:14px; margin-top:16px; font-family:var(--serif); font-weight:300; font-size:clamp(44px,9vw,80px); line-height:.9; color:#fff; }
.pho.pho-beliefs .panel__big small { font-size:clamp(22px,2vw,28px); font-style:italic; color:var(--gold); }
.pho.pho-beliefs .panel__p { margin-top:18px; font-size:15px; line-height:1.7; color:#C9D3DD; max-width:40ch; }
.pho.pho-beliefs .panel__steps { list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:28px; }
.pho.pho-beliefs .panel__steps li { padding:14px 12px; border:1px solid rgba(255,196,81,.3); border-radius:4px; font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:#E4EAF0; text-align:center; }
.pho.pho-beliefs .panel__steps li b { display:block; font-family:var(--serif); font-size:20px; letter-spacing:0; color:var(--gold); font-weight:500; margin-bottom:4px; }

/* visual: crossed-out list */
.pho.pho-beliefs .status { border-radius:6px; padding:clamp(32px,4vw,52px); background:#fff; border:1px solid rgba(22,40,59,.08); box-shadow:0 30px 60px -44px rgba(22,40,59,.35); }
.pho.pho-beliefs .status__k { font-size:11px; letter-spacing:.26em; text-transform:uppercase; font-weight:700; color:var(--goldink); }
.pho.pho-beliefs .status ul { list-style:none; margin-top:20px; display:flex; flex-direction:column; }
.pho.pho-beliefs .status li { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 0; border-bottom:1px solid rgba(22,40,59,.08); font-family:var(--serif); font-size:clamp(20px,1.8vw,24px); color:#6A7886; }
.pho.pho-beliefs .status li s { text-decoration-color:var(--golddeep); text-decoration-thickness:1.5px; }
.pho.pho-beliefs .status li em { font-family:var(--sans); font-style:normal; font-size:10px; letter-spacing:.2em; text-transform:uppercase; font-weight:700; color:#8C97A2; }
.pho.pho-beliefs .status__stamp { display:inline-block; margin-top:26px; padding:10px 18px; border:1.5px solid var(--navy); border-radius:2px; font-size:13px; letter-spacing:.3em; text-transform:uppercase; font-weight:800; color:var(--navy); transform:rotate(-3deg); }

/* reveal motion (only while html.pho-anim) */
.pho-anim .pho.pho-beliefs .belief .belief__text > *, .pho-anim .pho.pho-beliefs .belief .belief__media { opacity:0; transform:translateY(26px); transition:opacity .9s ease, transform 1s var(--ease); }
.pho-anim .pho.pho-beliefs .belief .belief__num { opacity:0; transform:translateY(40px); transition:opacity 1.2s ease .2s, transform 1.4s var(--ease) .2s; }
.pho-anim .pho.pho-beliefs .belief.is-in .belief__text > *, .pho-anim .pho.pho-beliefs .belief.is-in .belief__media, .pho-anim .pho.pho-beliefs .belief.is-in .belief__num { opacity:1; transform:none; }
.pho-anim .pho.pho-beliefs .belief.is-in .belief__text > *:nth-child(3) { transition-delay:.08s; }
.pho-anim .pho.pho-beliefs .belief.is-in .belief__text > *:nth-child(4) { transition-delay:.16s; }
.pho-anim .pho.pho-beliefs .belief.is-in .belief__text > *:nth-child(5) { transition-delay:.24s; }
.pho-anim .pho.pho-beliefs .belief.is-in .belief__media { transition-delay:.12s; }
.pho-anim .pho.pho-beliefs .belief .belief__frame::before { inset:0; }
.pho-anim .pho.pho-beliefs .belief.is-in .belief__frame::before { inset:16px -16px -16px 16px; transition-delay:.5s; }
.pho-anim .pho.pho-beliefs .belief--flip.is-in .belief__frame::before { inset:16px 16px -16px -16px; }
.pho-anim .pho.pho-beliefs .belief .status li s { text-decoration-color:transparent; transition:text-decoration-color .6s ease; }
.pho-anim .pho.pho-beliefs .belief.is-in .status li s { text-decoration-color:var(--golddeep); }
.pho-anim .pho.pho-beliefs .belief.is-in .status li:nth-child(1) s { transition-delay:.7s; }
.pho-anim .pho.pho-beliefs .belief.is-in .status li:nth-child(2) s { transition-delay:.95s; }
.pho-anim .pho.pho-beliefs .belief.is-in .status li:nth-child(n+3) s { transition-delay:1.2s; }
.pho-anim .pho.pho-beliefs .belief .status__stamp { opacity:0; transform:rotate(-3deg) scale(1.4); transition:opacity .4s ease 1.5s, transform .5s cubic-bezier(.3,1.5,.5,1) 1.5s; }
.pho-anim .pho.pho-beliefs .belief.is-in .status__stamp { opacity:1; transform:rotate(-3deg) scale(1); }

@media (max-width:1024px) {
  .pho.pho-beliefs .belief__row { grid-template-columns:1fr; }
  .pho.pho-beliefs .belief--flip .belief__media { order:0; }
  .pho.pho-beliefs .belief__text, .pho.pho-beliefs .belief--flip .belief__text { justify-self:start; max-width:640px; }
  .pho.pho-beliefs .belief__media { max-width:620px; }
}
@media (max-width:820px) {
  .pho.pho-beliefs .beliefs__index ol { justify-content:flex-start; }
}
@media (max-width:680px) {
  .pho.pho-beliefs .panel__steps { grid-template-columns:1fr; }
  .pho.pho-beliefs .belief__num { font-size:110px; }
  .pho.pho-beliefs .belief__frame::before, .pho-anim .pho.pho-beliefs .belief.is-in .belief__frame::before, .pho-anim .pho.pho-beliefs .belief--flip.is-in .belief__frame::before { inset:12px -10px -12px 10px; }
}