/* WhoIsSteve cathedral layer. Loads after site.css and re-skins it: ivory, ink, silver rules,
   jewel glass. Copy and structure stay where they are; this file only changes how they look. */
body.cathedral {
  --paper: #FBFAF6;
  --paper-2: #F3F2EE;
  --ink: #14121F;
  --ink-2: #4B4959;
  --navy: #120B2E;
  --navy-900: #0E0A28;
  --mist: #D9D6E6;
  --line: #D3D5DC;
  --silver: #C6C9D2;
  --purple: #5B2A9D;
  --cobalt: #2440C8;
  --emerald: #0F7A5A;
  --amber: #D9912B;
  --ruby: #A31D3D;
  --orange: var(--cobalt);
  --orange-deep: var(--ink);
  --orange-ink: var(--purple);
  --gold: #EDBE6A;
  --gold-ink: #7A5312;
  --teal: var(--emerald);
  --violet: var(--purple);
  --display: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --section: clamp(64px, 8vw, 128px);
  --radius-control: 2px;
  background: var(--paper);
}

/* ---------- Type ---------- */
.cathedral .display { text-transform: none; letter-spacing: -0.015em; line-height: 1.02; font-weight: 400; text-wrap: balance; }
.cathedral .d-xl { font-size: clamp(40px, 4.9vw, 80px); }
.cathedral .d-l { font-size: clamp(34px, 4vw, 62px); line-height: 1.04; }
.cathedral .d-m { font-size: clamp(26px, 2.6vw, 36px); }
.cathedral :is(.money-line, .card h3, .band h3, .price-line, .promise b, .rows-link b, .eng .tag, .caps b, .gauge b, .timeline b, .plaque b, .trust b, .tool-index b, .subnav a, .logo-tile b, .vid b, .viewer-cap, .metric-value, .case-h, .warn > b) { text-transform: none !important; letter-spacing: -0.005em; }
.cathedral :is(.steps .k, .band .n, .gauge .k, .timeline .k, .card .num, .case-num, .prompts .k) { font-family: var(--body); font-weight: 600; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; }
.cathedral .eyebrow { font-weight: 500; font-size: 12px; letter-spacing: .2em; color: var(--ink-2); }
.cathedral .on-dark .eyebrow, .cathedral .clarity .eyebrow { color: var(--gold); }
.cathedral .lede { color: var(--ink-2); font-size: clamp(17px, 1.35vw, 20px); line-height: 1.65; }
.cathedral .money-line { font-size: clamp(24px, 2.3vw, 34px); color: var(--purple); font-style: italic; margin-top: 22px; }
.cathedral .text-link { font-weight: 500; letter-spacing: .16em; font-size: 12px; color: var(--ink); border-bottom-width: 1px; padding-bottom: 6px; }
.cathedral .on-dark .text-link { color: var(--gold); }
.cathedral .eyebrow .text-link { color: var(--ink-2); }
.br-d, .br-t { display: none; }
@media (min-width: 1100px) { .br-d { display: inline; } }
@media (min-width: 700px) and (max-width: 1099px) { .br-t { display: inline; } }

/* ---------- Rules: thin silver instead of heavy ink ---------- */
.cathedral .lead { height: 1px; background: var(--silver); margin-bottom: 26px; }
.cathedral .lead::after { background: linear-gradient(90deg, transparent, var(--purple), var(--cobalt), var(--emerald), var(--amber), transparent); height: 1px; }
.cathedral .on-dark .lead, .cathedral .clarity .lead { background: rgba(217, 214, 230, .28); }
.cathedral :is(.steps li, .band, .details > div, .rows-link a, .gauge li, .timeline li, .trust, .trust a, .tool-index, .tool-index a, .prompts, .prompts li, .caps.light, .caps.light > div, .fit > div) { border-color: var(--silver) !important; border-width: 1px !important; }
.cathedral .steps li:last-child, .cathedral .band:last-child, .cathedral .details > div:last-child, .cathedral .rows-link a:last-child { border-bottom: 1px solid var(--silver); }
.cathedral .on-dark .steps li { border-color: rgba(217, 214, 230, .22) !important; }
.cathedral .rows > div { border-top: 1px solid var(--silver); }
.cathedral .gauge li { border-top-width: 1px !important; }
.cathedral .gauge li::before { width: 9px; height: 9px; top: -5px; background: var(--purple); }
.cathedral .gauge li:nth-child(2)::before { background: var(--cobalt); }
.cathedral .gauge li:nth-child(3)::before { background: var(--emerald); }
.cathedral .gauge li:nth-child(4)::before { background: var(--amber); }
.cathedral .gauge li:nth-child(5)::before { background: var(--ruby); }

/* ---------- Nav ---------- */
.cathedral .nav { background: color-mix(in srgb, var(--paper) 86%, transparent); border-bottom: 1px solid var(--silver); padding-block: 16px; }
.cathedral .brand { font-size: 21px; letter-spacing: .2em; text-transform: uppercase; }
.cathedral .brand small { letter-spacing: .22em; font-size: 9px; text-transform: uppercase; margin-top: 5px; }
.cathedral .tree-mark .trunk, .cathedral .tree-mark .limb { stroke-width: 1.4; }
.cathedral .tree-mark .bud { fill: var(--amber); }
.cathedral.bloom .tree-mark .bud, html.bloom .cathedral .tree-mark .bud { fill: var(--purple); }
.cathedral .nav a.link { font-weight: 500; font-size: 11px; letter-spacing: .22em; border-bottom-width: 1px; }
.cathedral .nav a.link[aria-current="page"], .cathedral .nav a.link:hover { border-color: var(--ink); }
.cathedral .nav .btn { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); padding: 13px 20px; font-size: 11px; letter-spacing: .2em; }
.cathedral .nav .btn::before { background: var(--ink); }
.cathedral .nav .btn:hover, .cathedral .nav .btn:focus-visible { color: var(--paper); }
.cathedral .menu summary { border: 1px solid var(--ink); font-weight: 500; font-size: 11px; letter-spacing: .2em; }
.cathedral .menu .panel-nav, .cathedral .nav .has-sub .sub::before { border: 1px solid var(--silver); box-shadow: 0 24px 60px rgba(20, 18, 31, .12); }
.cathedral .menu .panel-nav a[aria-current="page"] { box-shadow: inset 2px 0 0 var(--purple); }
.cathedral .subnav { border: 1px solid var(--silver); }
.cathedral .subnav a { font-size: clamp(20px, 2vw, 26px); letter-spacing: 0; }
.cathedral .subnav a + a { border-left: 1px solid var(--silver); }

/* ---------- Buttons ---------- */
.cathedral .btn { font-weight: 500; font-size: 12px; letter-spacing: .18em; padding: 18px 28px; background: var(--ink); color: var(--paper); }
.cathedral .btn::before { background: linear-gradient(100deg, var(--purple), var(--cobalt)); }
.cathedral .btn:hover, .cathedral .btn:focus-visible { color: #fff; }
.cathedral .btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px currentColor; }
.cathedral .btn.ghost::before { background: var(--ink); }
.cathedral .btn.ghost:hover { color: var(--paper); }
.cathedral .on-dark .btn { background: var(--paper); color: var(--ink); }
.cathedral .on-dark .btn:hover { color: #fff; }
.cathedral .on-dark .btn.ghost { background: transparent; color: var(--paper); }
.cathedral .on-dark .btn.ghost:hover { color: var(--ink); }
.cathedral .btn.violet { background: linear-gradient(100deg, var(--purple), var(--cobalt)); color: #fff; }
.cathedral .btn.violet::before { background: var(--paper); }
.cathedral .btn.violet:hover { color: var(--ink); }
.cathedral :focus-visible { outline: 2px solid var(--cobalt); outline-offset: 3px; }

/* ---------- Surfaces ---------- */
.cathedral .on-dark { background: radial-gradient(120% 90% at 78% 30%, #2A1563 0%, #170D3D 42%, #0B0820 100%); }
.cathedral .on-dark p, .cathedral .on-dark .lede { color: var(--mist); }
.cathedral .on-dark .steps .k { color: var(--gold); }
.cathedral .clarity { background: radial-gradient(110% 100% at 10% 90%, #1E1250 0%, #100A2C 55%, #0A0720 100%); }
.cathedral .clarity .panel { border: 1px solid rgba(217, 214, 230, .28); background: rgba(255, 255, 255, .04); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.cathedral .price-line { color: #fff; font-size: clamp(34px, 3.6vw, 52px); }
.cathedral .glass { border-radius: 0; }
.cathedral .best-fit { background: #fff; border: 1px solid var(--silver); border-left: 3px solid var(--amber); }
.cathedral .best-fit b { letter-spacing: .2em; font-weight: 500; color: var(--gold-ink); }
.cathedral .thanks { border-left: 2px solid var(--purple); }
.cathedral :is(.eng, .booking-box, .warn, .mail-box) { border: 1px solid var(--silver); background: #fff; box-shadow: 0 30px 60px -40px rgba(20, 18, 31, .25); }
.cathedral .warn { border-left: 3px solid var(--purple); }
.cathedral .eng-dark { background: radial-gradient(120% 120% at 80% 0%, #2A1563, #0E0A28); border-color: transparent; }
.cathedral .start-here { border-left: 2px solid var(--purple); background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.cathedral .start-here b { color: var(--purple); letter-spacing: .2em; font-weight: 500; }
.cathedral .disclosure { background: var(--navy-900); }
.cathedral .shot { border: 1px solid var(--silver); box-shadow: 0 40px 80px -40px rgba(36, 64, 200, .35), 0 0 0 8px #fff, 0 0 0 9px var(--silver); }
.cathedral a.shot:hover, .cathedral a.shot:focus-visible { transform: translateY(-4px); box-shadow: 0 50px 90px -40px rgba(91, 42, 157, .45), 0 0 0 8px #fff, 0 0 0 9px var(--silver); }
.cathedral .shot-cta { font-weight: 500; letter-spacing: .2em; font-size: 11px; }
.cathedral .chip, .cathedral .day, .cathedral .slot, .cathedral .week { border: 1px solid var(--silver); font-weight: 500; letter-spacing: .16em; font-size: 11px; }
.cathedral .chip[aria-pressed="true"], .cathedral .day[aria-pressed="true"], .cathedral .slot[aria-pressed="true"] { border-color: var(--ink); }
.cathedral :is(.logo-art, .vid-art, .hero .reel) { border: 1px solid var(--silver); }
.cathedral .logo-tile:hover .logo-art, .cathedral .logo-tile:focus-visible .logo-art { box-shadow: 0 30px 50px -30px rgba(36, 64, 200, .4); transform: translateY(-3px); }
.cathedral .play { background: var(--ink); }
.cathedral .vid:hover .play { background: var(--purple); }
.cathedral .ticks li::before { border-color: var(--emerald); }
.cathedral .tagline { color: var(--purple); letter-spacing: .2em; font-weight: 500; font-size: 12px; }
.cathedral .rows-link i, .cathedral .tool-index i { color: var(--purple); }
.cathedral .rows-link a:hover { background: #fff; }
.cathedral .trust a:hover b { color: var(--purple); }
.cathedral .book { background: linear-gradient(135deg, #F6F5F2 0%, #DCDEE4 45%, #F7F6F3 70%, #CFD2DA 100%); }
.cathedral .footer { background: #0B0820; }
.cathedral .footer h4 { font-weight: 500; letter-spacing: .22em; font-size: 11px; }
.cathedral .footer strong { letter-spacing: .2em; }

/* Forms: a stable, high-contrast surface */
.cathedral .field label { font-weight: 500; letter-spacing: .18em; font-size: 11px; }
.cathedral .field input, .cathedral .field textarea, .cathedral .field select, .cathedral .mail-row input { background: #fff; border: 1px solid #9EA2AE; border-radius: 2px; }
.cathedral .field input:focus, .cathedral .field textarea:focus { border-color: var(--cobalt); box-shadow: 0 0 0 3px rgba(36, 64, 200, .18); }
.cathedral .c-form { background: #fff; border: 1px solid var(--silver); padding: clamp(22px, 3vw, 40px); box-shadow: 0 40px 80px -50px rgba(20, 18, 31, .3); }

/* Cards: thin gallery frames, the real screenshot does the talking */
.cathedral .card .glass { background: #fff; box-shadow: 0 0 0 1px var(--silver), 0 0 0 9px #fff, 0 0 0 10px var(--silver), 0 40px 60px -40px rgba(20, 18, 31, .35); }
.cathedral .card { padding: 10px; }
.cathedral .card::before { height: 2px; left: 10px; top: 10px; background: linear-gradient(90deg, var(--purple), var(--cobalt), var(--emerald), var(--amber)); z-index: 3; }
.cathedral .card:hover::before, .cathedral .card:focus-visible::before { width: calc(100% - 20px); }
.cathedral .card h3 { font-size: 30px; line-height: 1.05; margin-top: 26px; }
.cathedral .grid.four .card h3 { font-size: 26px; }
.cathedral .card .num { top: 22px; left: 22px; background: #fff; padding: 7px 9px; font-size: 11px; }
.cathedral .card .scope { color: var(--gold-ink); letter-spacing: .18em; font-weight: 500; }
.cathedral .card .glass::after { display: none; }

/* ---------- The glass ---------- */
.fx {
  position: absolute; left: var(--x); top: var(--y); width: var(--w); aspect-ratio: 139 / 791;
  transform: rotate(var(--r, 0deg));
  background-image: url("https://static.wixstatic.com/media/2f0353_ea3096cdbba74967b015449bebfdfbfd~mv2.png/v1/fit/w_1600,h_904,q_90/facets.png");
  background-repeat: no-repeat; background-size: 1151.08% auto; background-position: var(--bx) 49.6%;
  filter: drop-shadow(0 10px 14px rgba(20, 18, 31, .16));
  pointer-events: none;
}
.fx-purple { --bx: 2.12%; } .fx-cobalt { --bx: 15.81%; } .fx-emerald { --bx: 29.5%; } .fx-amber { --bx: 43.26%; }
.fx-ruby { --bx: 56.88%; } .fx-clear1 { --bx: 70.57%; } .fx-clear2 { --bx: 84.26%; } .fx-clear3 { --bx: 97.95%; }
.fx.anchor { opacity: 0 !important; filter: none; }
.stage { position: relative; margin: 0; min-width: 0; }
.stage .still { display: block; width: 100%; height: auto; position: relative; filter: drop-shadow(0 30px 40px rgba(36, 30, 90, .18)); }
.stage .still, .stage .fx:not(.anchor), .stage .refl, .stage .floor, .stage .halo { opacity: var(--lock, 1); }
.stage .still, .stage .fx:not(.anchor) { transition: filter .5s ease; }
.stage.seam .still, .stage.seam .fx:not(.anchor) { filter: brightness(1.18) saturate(1.15) drop-shadow(0 0 22px rgba(255, 255, 255, .9)); }
.stage.locked .still, .stage.locked .fx:not(.anchor) { animation: lockin .9s ease-out 1; }
@keyframes lockin { 0% { filter: brightness(1.5) saturate(1.2) drop-shadow(0 0 30px rgba(255, 255, 255, 1)); } 100% { filter: brightness(1) drop-shadow(0 30px 40px rgba(36, 30, 90, .18)); } }
.is-live .stage .still { animation: hover-glass 9s ease-in-out infinite alternate; }
.is-live .stage.locked .still { animation: lockin .9s ease-out 1, hover-glass 9s ease-in-out .9s infinite alternate; }
@keyframes hover-glass { from { transform: translate3d(0, -5px, 0); } to { transform: translate3d(0, 5px, 0); } }

/* Travelling pieces: one fixed artwork layer above the page, never in the way of a click */
#glass-layer { position: fixed; inset: 0; z-index: 15; pointer-events: none; overflow: hidden; perspective: 1100px; contain: strict; }
#glass-layer .fx { left: 0; top: 0; width: 100px; transform-origin: 50% 50%; will-change: transform, opacity; opacity: 0; filter: drop-shadow(0 18px 22px rgba(20, 18, 31, .22)); }
@media (max-width: 700px) { #glass-layer .fx-clear2, #glass-layer .fx-clear3, #glass-layer .fx-ruby { display: none; } }

/* Hero */
.cathedral .c-hero { padding-top: clamp(40px, 5vw, 80px); padding-bottom: clamp(56px, 7vw, 120px); background:
  radial-gradient(60% 60% at 78% 55%, rgba(255, 255, 255, .95), transparent 70%),
  radial-gradient(40% 40% at 92% 20%, rgba(91, 42, 157, .07), transparent 70%),
  radial-gradient(40% 40% at 60% 95%, rgba(36, 64, 200, .06), transparent 70%); }
.cathedral .c-hero .split { grid-template-columns: 1.3fr .7fr; align-items: center; gap: clamp(24px, 4vw, 72px); }
.c-dot { display: flex; align-items: center; gap: 12px; }
.c-dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--emerald); flex: none; }
.c-dot::after { content: ""; flex: 1; max-width: 110px; height: 1px; background: var(--silver); }
.cathedral .c-hero .lede { max-width: 54ch; margin-top: 26px; }
.cathedral .rail { font-weight: 500; letter-spacing: .2em; font-size: 11px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--silver); max-width: 520px; }
.cathedral .rail img { width: 64px; height: 64px; box-shadow: 0 0 0 1px var(--silver), 0 0 0 5px #fff, 0 0 0 6px var(--silver); }
.s-arch { width: min(100%, 560px, 58vh); justify-self: center; padding-bottom: 14%; }
.s-arch .refl { position: absolute; left: 0; top: 86%; width: 100%; height: auto; transform: scaleY(-1); filter: blur(7px) saturate(1.3); opacity: calc(.34 * var(--lock, 1)); -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 34%); mask-image: linear-gradient(to top, #000 0%, transparent 34%); pointer-events: none; }
.s-arch .floor { position: absolute; left: -22%; right: -22%; bottom: -4%; height: 34%; pointer-events: none; filter: blur(34px); background:
  radial-gradient(30% 60% at 18% 40%, rgba(91, 42, 157, .42), transparent 70%),
  radial-gradient(26% 60% at 38% 60%, rgba(36, 64, 200, .38), transparent 70%),
  radial-gradient(24% 70% at 52% 30%, rgba(255, 255, 255, .95), transparent 70%),
  radial-gradient(26% 60% at 66% 60%, rgba(15, 122, 90, .34), transparent 70%),
  radial-gradient(30% 60% at 84% 40%, rgba(217, 145, 43, .42), transparent 70%); }

/* Who is Steve: portrait kept clean, four panes stand beside it */
.portrait-wrap { position: relative; max-width: 600px; padding-right: 36%; }
.cathedral .portrait { aspect-ratio: 3 / 4; box-shadow: 0 0 0 1px var(--silver), 0 0 0 10px #fff, 0 0 0 11px var(--silver), 0 50px 80px -50px rgba(20, 18, 31, .4); }
.s-panes { position: absolute; right: 0; bottom: 8%; width: 31%; aspect-ratio: 1 / 1.5; }
.cathedral .rows.jewel > div { border-top: 1px solid var(--silver); padding-left: 18px; position: relative; }
.cathedral .rows.jewel > div::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 3px; background: var(--purple); }
.cathedral .rows.jewel > div:nth-child(2)::before { background: var(--cobalt); }
.cathedral .rows.jewel > div:nth-child(3)::before { background: var(--emerald); }
.cathedral .rows.jewel > div:nth-child(4)::before { background: var(--amber); }
.cathedral .rows b { font-weight: 500; letter-spacing: .18em; font-size: 11px; }

/* Integrate */
.s-interlock { width: min(100%, 640px); justify-self: center; }
.cathedral .steps .v { font-size: 18px; font-weight: 400; }

/* Three ways: three glass-framed offers, easy to compare */
.cathedral .c-trio { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); margin-top: 40px; }
.cathedral .c-trio .band { display: flex; flex-direction: column; align-items: stretch; gap: 14px; padding: 0 clamp(20px, 2.2vw, 32px) clamp(24px, 2.4vw, 34px); background: #fff; border: 1px solid var(--silver) !important; box-shadow: 0 40px 70px -50px rgba(20, 18, 31, .3); }
.cathedral .c-trio .band .pane-art { position: relative; flex: none; margin: 0 calc(-1 * clamp(20px, 2.2vw, 32px)) 6px; border-bottom: 1px solid var(--silver); overflow: hidden; background: radial-gradient(70% 90% at 50% 100%, rgba(91, 42, 157, .14), transparent 70%), linear-gradient(#FDFCFA, #F3F2EE); }
.cathedral .c-trio .band:nth-child(2) .pane-art { background: radial-gradient(70% 90% at 50% 100%, rgba(15, 122, 90, .16), transparent 70%), linear-gradient(#FDFCFA, #F3F2EE); }
.cathedral .c-trio .band:nth-child(3) .pane-art { background: radial-gradient(70% 90% at 50% 100%, rgba(217, 145, 43, .2), transparent 70%), linear-gradient(#FDFCFA, #F3F2EE); }
.cathedral .c-trio .band .n { color: var(--purple); }
.cathedral .c-trio .band:nth-child(2) .n { color: var(--emerald); }
.cathedral .c-trio .band:nth-child(3) .n { color: var(--gold-ink); }
.cathedral .c-trio .band h3 { font-size: clamp(28px, 2.4vw, 36px); line-height: 1.05; }
.cathedral .c-trio .band .tag { font-weight: 500; letter-spacing: .2em; font-size: 11px; color: var(--ink-2); }
.cathedral .c-trio .band .text-link { margin-top: auto; align-self: flex-start; }
.cathedral .c-trio .band .chips-line { font-weight: 500; letter-spacing: .14em; }
@media (max-width: 980px) { .cathedral .c-trio { grid-template-columns: 1fr; } }

/* System: the Money Tree gets room */
.cathedral .c-system { padding-block: clamp(88px, 11vw, 176px); overflow: hidden; }
.s-tree { width: min(100%, 600px); justify-self: center; }
.s-tree .halo { position: absolute; inset: -18%; background: radial-gradient(closest-side, rgba(237, 190, 106, .28), rgba(91, 42, 157, .18) 55%, transparent 75%); filter: blur(20px); pointer-events: none; }
.s-tree .still { filter: drop-shadow(0 0 40px rgba(237, 190, 106, .25)); }
.cathedral .c-seq li { transition: opacity .6s, border-color .6s; }
.cathedral .c-seq.run li { opacity: .38; }
.cathedral .c-seq.run li.lit { opacity: 1; border-color: var(--gold) !important; }
.cathedral .c-seq.run li.lit .k { color: #fff; text-shadow: 0 0 18px rgba(237, 190, 106, .9); }

/* Studio: quiet */
.cathedral .c-studio .split { grid-template-columns: 1.5fr .5fr; }
.s-cluster { width: min(100%, 300px); justify-self: center; }

/* Proof: bright gallery */
.cathedral .c-proof { background: #fff; }
.cathedral .c-proof-head { grid-template-columns: 1.4fr .6fr; align-items: end; }
.s-fan { width: min(100%, 380px); aspect-ratio: 2 / 1; justify-self: end; }
.cathedral .skeleton { background: linear-gradient(90deg, #F3F2EE, #E4E5EA, #F3F2EE); background-size: 200% 100%; }

/* Clarity: one clear lens */
.s-lens { width: min(60%, 260px); margin-top: 36px; }
.s-lens .still { filter: drop-shadow(0 0 30px rgba(180, 190, 255, .35)); }

/* Start: the glass rests while someone types */
.c-start-row { display: grid; grid-template-columns: 1fr 190px; gap: 28px; align-items: end; margin-top: 32px; }
.c-start-row .best-fit { margin-top: 0; }
.s-frame { width: 190px; }
.is-live .s-frame .still { animation: none; }

@media (max-width: 900px) {
  .cathedral .c-hero .split, .cathedral .c-studio .split, .cathedral .c-proof-head { grid-template-columns: 1fr; }
  .s-arch { width: min(78%, 380px); order: 2; }
  .s-cluster { width: 180px; justify-self: start; }
  .s-fan { justify-self: start; width: min(100%, 300px); }
  .portrait-wrap { max-width: 440px; }
  .s-tree { width: min(88%, 440px); }
  .s-interlock { width: min(92%, 480px); }
}
@media (max-width: 640px) {
  .cathedral .brand { font-size: 17px; letter-spacing: .14em; }
  .cathedral .d-xl { font-size: clamp(38px, 10.6vw, 56px); }
  .cathedral .d-l { font-size: clamp(31px, 8.4vw, 44px); }
  .c-dot::after { display: none; }
  .c-start-row { grid-template-columns: 1fr 96px; gap: 16px; }
  .s-frame { width: 96px; }
  .cathedral .actions .btn { flex: 1 1 100%; justify-content: center; }
}

/* Stillness: assembled glass, no travel */
@media (prefers-reduced-motion: reduce) {
  #glass-layer { display: none; }
  .stage .still, .stage .fx { animation: none !important; transition: none !important; }
}

.cathedral main { overflow-x: clip; }
.cathedral .c-trio .band .pane-art::before { content: ""; display: block; padding-top: 50%; }
.cathedral .steps li { grid-template-columns: 124px 1fr; }

/* ---------- SG window: a hologram held in a clear slab ---------- */
.s-holo { width: min(100%, 540px, 60vh); padding-bottom: 12%; perspective: 1200px; }
.s-holo .holo { position: relative; opacity: var(--lock, 1); transform-style: preserve-3d; transform: rotateY(calc(var(--tx, 0) * 11deg)) rotateX(calc(var(--ty, 0) * -8deg)); will-change: transform; padding: 9% 9% 7%; }
.s-holo .holo::before { content: ""; position: absolute; inset: 0; border-radius: 18px; pointer-events: none;
  background: linear-gradient(calc(118deg + var(--tx, 0) * 30deg), rgba(255,255,255,.72) 0%, rgba(255,255,255,.14) 28%, rgba(255,255,255,.05) 55%, rgba(255,255,255,.46) 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.95), inset 0 0 0 2px rgba(198,201,210,.55), inset 0 2px 18px rgba(255,255,255,.9), inset 0 -10px 24px rgba(120,130,190,.12), 0 40px 70px -40px rgba(36,30,90,.38), 0 0 0 1px rgba(198,201,210,.6);
  -webkit-backdrop-filter: blur(1.5px); backdrop-filter: blur(1.5px); }
.s-holo .holo::after { content: ""; position: absolute; left: 50%; top: 2.6%; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; box-shadow: inset 0 1px 3px rgba(20,18,31,.35), 0 0 0 1px rgba(198,201,210,.9); background: var(--paper); }
.s-holo .still, .s-holo .ghost { display: block; width: 100%; height: auto; }
.s-holo .still { opacity: 1; filter: drop-shadow(0 18px 26px rgba(36,30,90,.22)); transform: translateZ(26px); }
.is-live .s-holo .still, .is-live .s-holo.locked .still { animation: none; }
.s-holo .ghost { position: absolute; left: 9%; top: 9%; width: 82%; pointer-events: none; mix-blend-mode: multiply; opacity: calc(.04 + var(--ta, 0) * .2); }
.s-holo .g1 { filter: hue-rotate(-38deg) saturate(1.6); transform: translate3d(calc(var(--tx, 0) * -16px), calc(var(--ty, 0) * -10px), 0); }
.s-holo .g2 { filter: hue-rotate(46deg) saturate(1.6); transform: translate3d(calc(var(--tx, 0) * 16px), calc(var(--ty, 0) * 10px), 52px); mix-blend-mode: screen; opacity: calc(.02 + var(--ta, 0) * .14); }
.s-holo .sheen { position: absolute; left: 9%; top: 9%; width: 82%; aspect-ratio: 597 / 800; pointer-events: none; transform: translateZ(40px);
  clip-path: polygon(50% 3%, 66% 9%, 82% 22%, 93% 40%, 97% 56%, 97% 95%, 3% 95%, 3% 56%, 7% 40%, 18% 22%, 34% 9%);
  background: linear-gradient(112deg, transparent 0 34%, rgba(255,120,210,.5) 41%, rgba(255,255,255,.95) 47%, rgba(120,230,255,.55) 53%, rgba(255,214,120,.4) 58%, transparent 66% 100%);
  background-size: 260% 100%; background-position: calc(50% + var(--tx, 0) * 46%) 0; mix-blend-mode: soft-light; opacity: .95; }
.s-holo .refl { top: auto; bottom: -3%; left: 9%; width: 82%; opacity: calc(.26 * var(--lock, 1)); }
.s-holo .floor { bottom: -8%; background:
  radial-gradient(30% 60% at 20% 40%, rgba(36,64,200,.42), transparent 70%),
  radial-gradient(26% 70% at 50% 30%, rgba(255,255,255,.95), transparent 70%),
  radial-gradient(28% 60% at 46% 70%, rgba(217,145,43,.4), transparent 70%),
  radial-gradient(30% 60% at 82% 40%, rgba(36,64,200,.4), transparent 70%); }
.s-cluster { width: min(100%, 360px); }
@media (max-width: 900px) { .s-holo { width: min(84%, 400px); order: 2; } .s-cluster { width: 220px; } }
@media (prefers-reduced-motion: reduce) { .s-holo .holo { transform: none; } .s-holo .ghost { display: none; } }
/* ================= Pass 2 (2026-11-14): one focal move, then stillness ================= */
/* Text is readable from the start: no fade-up reveals, no drifting art. */
.cathedral .reveal { opacity: 1; transform: none; transition: none; }
.cathedral .stage .still, .cathedral .is-live .stage .still { animation: none !important; }

/* --- Facets (shared by the sill, the flying pieces and the rule) --- */
.sj { display: block; clip-path: polygon(5% 0, 100% 0, 95% 100%, 0 100%); }
.sj-violet  { background: linear-gradient(100deg, #8E5BE0 0%, #5B2A9D 48%, #B08CF0 100%); }
.sj-cobalt  { background: linear-gradient(100deg, #5C7BFF 0%, #2440C8 48%, #8FA6FF 100%); }
.sj-emerald { background: linear-gradient(100deg, #3DBE98 0%, #0F7A5A 48%, #7FE0BF 100%); }
.sj-amber   { background: linear-gradient(100deg, #FFD27A 0%, #D9912B 48%, #FFE7AE 100%); }
.sj-ruby    { background: linear-gradient(100deg, #E0607F 0%, #A31D3D 48%, #F09AAE 100%); }
.sj::after { content: ""; position: absolute; inset: 0 0 58% 0; background: linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0)); }

/* --- Source: five facets seated on the sill of the SG window --- */
.sill { position: absolute; left: 9%; width: 82%; bottom: 0; margin-bottom: 9.1%; aspect-ratio: 29 / 1; transform: translateZ(30px); pointer-events: none; }
.sill i { position: absolute; top: 0; height: 100%; width: 10.5%; }
.sill i:nth-child(1) { left: 19%; } .sill i:nth-child(2) { left: 32%; } .sill i:nth-child(3) { left: 45%; } .sill i:nth-child(4) { left: 58%; } .sill i:nth-child(5) { left: 71%; }
.sill i { filter: drop-shadow(0 1px 1px rgba(20,18,31,.35)); }
.sill i.out { background: rgba(20, 18, 31, .34); filter: none; }      /* the empty seat a piece left behind */
.sill i.out::after { display: none; }
/* the highlight that runs along the sill before the release */
.sill::before { content: ""; position: absolute; top: -60%; bottom: -60%; width: 22%; left: calc(-22% + var(--hl, 0) * 122%); opacity: calc(var(--hl, 0) * (1 - var(--hl, 0)) * 4);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.95), transparent); mix-blend-mode: screen; filter: blur(2px); }

/* --- Flight: fixed layer above the page, below the sticky nav --- */
.handoff-layer { position: fixed; inset: 0; z-index: 15; pointer-events: none; overflow: hidden; contain: strict; }
.handoff-layer .flyer { position: absolute; left: 0; top: 0; width: 100px; height: 12px; opacity: 0; transform-origin: 50% 50%; will-change: transform; filter: drop-shadow(0 10px 12px rgba(20,18,31,.22)); }

/* --- Landing: the rule under "builds the pieces." --- */
.hl-pieces { position: relative; display: inline-block; white-space: nowrap; padding-bottom: .16em; }
.hl-pieces .prism { position: absolute; left: 0; right: 0; bottom: 0; height: max(5px, .1em); display: flex; gap: 0;
  filter: saturate(calc(1 + var(--refr, 0) * .9)) brightness(calc(1 + var(--refr, 0) * .45)) drop-shadow(0 0 calc(var(--refr, 0) * 14px) rgba(140, 150, 255, .9)); }
.hl-pieces .prism i { position: relative; height: 100%; margin-right: -1.2%; }
.hl-pieces .prism i:nth-child(1) { width: 27%; } .hl-pieces .prism i:nth-child(2) { width: 27%; } .hl-pieces .prism i:nth-child(3) { width: 21%; } .hl-pieces .prism i:nth-child(4) { width: 18%; } .hl-pieces .prism i:nth-child(5) { width: 11.8%; margin-right: 0; }
/* with the script running, a segment shows only once its piece has arrived */
.handoff .hl-pieces .prism i { visibility: hidden; }
.handoff .hl-pieces .prism i.on { visibility: visible; }
/* phones and short screens: the rule draws in place, each piece sliding a short way into its slot */
.handoff-local .hl-pieces .prism i.on { transform-origin: 0 50%; transform: translateX(calc((1 - var(--e, 1)) * 18px)) scaleX(var(--e, 1)); }

/* --- The portrait sits in its own quietly lit glass frame --- */
.cathedral .portrait-wrap { padding-right: 0; max-width: 520px; }
.cathedral .portrait { position: relative; border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(198,201,210,.9), 0 0 0 9px rgba(255,255,255,.72), 0 0 0 10px rgba(198,201,210,.8),
              0 2px 0 10px rgba(255,255,255,.5), 0 46px 70px -44px rgba(20, 18, 31, .42), 0 0 60px -8px rgba(120, 130, 255, .16); }
.cathedral .portrait::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(128deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,0) 72%, rgba(190,200,255,.16) 100%); }

/* --- Spacing: source and landing share one scroll beat on desktop --- */
@media (min-width: 900px) {
  .cathedral .c-hero { padding-bottom: clamp(28px, 3vw, 52px); }
  .cathedral .c-partner { padding-top: clamp(40px, 4vw, 68px); }
  .cathedral .c-partner .split { align-items: start; }
}
@media (prefers-reduced-motion: reduce) { .handoff-layer { display: none; } }