/* Homepage, "The Journey" (2026-09-29): the owner-approved concept on the real homepage (tools/build-homepage.py).
   The header, menus, onboarding, client band markup, the Free Biviti Advisor section and the footer are the site's own.
   Tokens and controls (--hx-*, .hx-*) first, then the page. Light and dark themes; static and complete under reduced motion. */
:root{--hx-ink:#120c0e;--hx-text:#1f1a1b;--hx-muted:#5a5153;--hx-ivory:#fbf9f6;--hx-stone:#f3efe9;--hx-white:#ffffff;--hx-wine:#72253a;--hx-champ:#e9cfaa;
 --hx-cream:#f8f3ea;--hx-on-dark:#e4d8cc;--hx-track:#1f1a1b1f;--hx-accent:#72253a;--hx-line:#1f1a1b14;--hx-ease:cubic-bezier(.2,.7,.2,1);
 --hx-max:1280px;--hx-edge:clamp(24px,5.6vw,80px);--hx-bleed:max(var(--hx-edge),calc((100vw - var(--hx-max)) / 2))}
html[data-theme=dark]{--hx-text:#f7ecdf;--hx-muted:#d6c8c1;--hx-ivory:#110d0f;--hx-stone:#18120f;--hx-white:#141012;--hx-track:#f7ecdf26;--hx-accent:#e9cfaa;--hx-line:#f7ecdf1a}
.hx-dark{--hx-text:#fbf6ee;--hx-muted:#e4d8cc;--hx-accent:#e9cfaa;--hx-track:#e9cfaa33;--hx-line:#e9cfaa24}
.hx-nw{white-space:nowrap}
.hx-wrap{max-width:var(--hx-max);margin:0 auto;padding:0 var(--hx-edge);box-sizing:content-box;position:relative}
.hx-kicker{font-size:12.5px!important;font-weight:700!important;letter-spacing:.22em!important;text-transform:uppercase;color:var(--hx-accent)!important;margin:0 0 20px!important;line-height:1.4!important}
.hx-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 30px;margin-top:34px}
.hx-btn,.hx-link{display:inline-flex;align-items:center;gap:14px;min-height:54px;font:inherit;font-size:15px;font-weight:600;text-decoration:none;cursor:pointer;line-height:1.3;transition:background .3s,transform .3s var(--hx-ease),box-shadow .3s,color .3s}
.hx-btn{padding:0 28px;border-radius:999px;background:var(--hx-champ);color:#151511;border:0}
.hx-btn:hover{background:#f0d9b8;box-shadow:0 14px 34px -18px #e9cfaa}
.hx-link{min-height:44px;padding:0;border:0;background:none;color:var(--hx-accent)}
.hx-btn svg,.hx-link svg{flex:none;width:20px;height:20px;transition:transform .3s var(--hx-ease)}
.hx-btn:hover svg,.hx-link:hover svg{transform:translateX(4px)}
.hx-btn:focus-visible,.hx-link:focus-visible,.hx-play:focus-visible,.hx-steps-nav button:focus-visible{outline:2px solid var(--hx-accent);outline-offset:4px}
.hx-play{appearance:none;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid currentColor;background:none;color:inherit;font:inherit;font-size:13px;font-weight:600;cursor:pointer;opacity:.85;flex:none}
.hx-steps-nav{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:12px}
.hx-steps-nav button{appearance:none;border:0;background:none;padding:0 0 4px;margin:0;font:inherit;text-align:left;cursor:pointer;min-height:44px;display:grid;align-content:start;gap:10px;color:var(--hx-muted);opacity:.8}
.hx-steps-nav button[aria-current=true]{color:var(--hx-text);opacity:1}
.hx-steps-nav i{display:block;height:3px;border-radius:2px;background:var(--hx-track);position:relative;overflow:hidden}
.hx-steps-nav i:after{content:'';position:absolute;inset:0;background:var(--hx-accent);transform:scaleX(0);transform-origin:left}
.hx-steps-nav button.is-done i:after{transform:none}
.hx-steps-nav button[aria-current=true] i:after{transform:scaleX(var(--f,1))}
.hx-steps-nav span{font-size:13px;font-weight:600;line-height:1.3}
.hx-dash-dialog{max-width:min(96vw,1240px);max-height:96vh;padding:18px;border:0;border-radius:16px;background:#0b0709;color:#e4d8cc;box-sizing:border-box}
.hx-dash-dialog::backdrop{background:#0b0709d9}
.hx-dash-dialog img{display:block;max-height:84vh;width:auto;max-width:100%;margin:0 auto;border-radius:8px}
.hx-dash-dialog p{text-align:center;font-size:13px;margin:12px 0 0}
.hx-dash-close{position:absolute;right:10px;top:8px;width:44px;height:44px;border-radius:50%;border:0;background:#fbf6ee;color:#1f1a1b;font-size:24px;cursor:pointer}
@media (max-width:700px){.hx-actions{flex-direction:column;align-items:flex-start;gap:10px}.hx-steps-nav span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}}
@media (prefers-reduced-motion:reduce){[class^=hj-] *{animation:none!important;transition:none!important}}

.hj-bar{position:absolute!important;top:0;left:0;right:0;min-height:0!important;height:auto!important;padding:0!important;margin:0!important;background:none!important;z-index:40;overflow:visible!important}
.hj-bar .opening-photography,.hj-bar .opening-message{display:none!important}
.hj-legacy,main>.expertise,main>.product-evidence,main>.context-workstream,main>.continuity,main>.industry-context{display:none!important}
.hx-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[class^=hj-] p,[class^=hj-] h2,[class^=hj-] h1{margin:0}
[class^=hj-] h2{font-size:clamp(38px,4.4vw,68px);line-height:1;letter-spacing:-.045em;font-weight:800;color:var(--hx-text);text-wrap:balance}
.hj-stick{position:relative}
html.hx-live .hj-stick{position:sticky;top:0;height:100svh;overflow:hidden}

/* ============ hero ============ */
.hj-hero{position:relative;overflow-x:clip;background:#0b0709;color:var(--hx-cream);--hx-accent:#e9cfaa;--hx-text:#fbf6ee}
html.hx-live .hj-hero{height:230vh}
.hj-hero .hj-stick{min-height:100svh}
.hj-hero-media{position:absolute;inset:0;overflow:hidden}
.hj-hero-media img{width:100%;height:100%;object-fit:cover;object-position:62% 50%;transform:scale(calc(1.16 - var(--p,1) * .16));filter:brightness(.6)}
.hj-hero-media:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#0b0709e6 0%,#0b070926 28%,#0b070966 62%,#0b0709f2 100%),linear-gradient(90deg,#0b0709d9 0%,#0b070900 72%)}
.hj-hero-in{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:flex-end;min-height:100svh;box-sizing:border-box;padding:150px var(--hx-bleed) 11vh}
.hj-greet{font-size:15px!important;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#e9cfaa;margin-bottom:22px!important;display:flex;align-items:center;gap:14px}
.hj-greet:before{content:'';width:34px;height:1px;background:#e9cfaa}
.hj-lead{font-size:clamp(24px,2.7vw,42px)!important;line-height:1.14!important;letter-spacing:-.035em;font-weight:500;color:#e4d8cc;white-space:nowrap}
.hj-lead+.hj-lead{margin-top:6px!important}
.hj-h1{margin:34px 0 0!important;padding-top:30px;border-top:1px solid #e9cfaa40;max-width:none;color:#fbf6ee;font-size:clamp(52px,6.5vw,112px)!important;line-height:.9!important;letter-spacing:-.06em!important;font-weight:800!important;text-wrap:balance}
.hj-h1 span{display:block}
.hj-after{max-width:720px!important}
.hj-after p:not(.hj-sub){max-width:600px}
.hj-sub{font-size:clamp(22px,2.2vw,34px)!important;line-height:1.15!important;letter-spacing:-.03em;font-weight:600;color:#e9cfaa!important;margin-bottom:14px!important}
.hj-after{margin-top:26px!important;max-width:600px}
.hj-after p{font-size:18px;line-height:1.55;color:var(--hx-on-dark)}
html.hx-live .hj-line{opacity:0;transform:translateY(26px);transition:opacity .8s var(--hx-ease),transform .8s var(--hx-ease)}
html.hx-live .hj-line.is-on{opacity:1;transform:none}
html.hx-live .hj-lead{clip-path:inset(0 100% 0 0);transform:none;transition:opacity .4s,clip-path 1.1s var(--hx-ease)}
html.hx-live .hj-lead.is-on{clip-path:inset(0 -2% 0 0)}
.hj-scroll{display:none}
html.hx-live .hj-scroll{display:block;position:absolute;z-index:1;right:var(--hx-bleed);bottom:5vh;font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:#e9cfaa99}
.hj-hero a:focus-visible{outline:2px solid var(--hx-champ);outline-offset:4px}

/* ============ shared scene layout ============ */
.hx-scene,.hj-method,.hj-visual{position:relative;overflow:clip}
.hj-scene-head{position:relative}
.hx-scene .hj-stick,.hj-method .hj-stick{padding:120px var(--hx-bleed) 100px;box-sizing:border-box}
.hx-scene .hx-steps-nav,.hj-method-nav{margin-top:36px;max-width:980px}
.hj-steps{display:grid;gap:64px;margin-top:56px}
html.hx-live .hx-scene .hj-stick,html.hx-live .hj-method .hj-stick{padding:0}
html.hx-live .hj-scene-head{position:absolute;left:var(--hx-bleed);right:var(--hx-bleed);top:96px}
html.hx-live .hx-scene h2,html.hx-live .hj-method h2{font-size:clamp(22px,1.9vw,30px);letter-spacing:-.02em;line-height:1.2;max-width:none}
html.hx-live .hx-scene .hx-steps-nav,html.hx-live .hj-method-nav{position:absolute;left:var(--hx-bleed);right:var(--hx-bleed);top:212px;margin:0;max-width:none}
html.hx-live .hj-steps{margin:0;display:block}
html.hx-live .hj-step,html.hx-live .hj-stage{position:absolute;left:var(--hx-bleed);right:var(--hx-bleed);top:56%;opacity:0;transform:translateY(calc(-50% + 44px));transition:opacity .8s var(--hx-ease),transform .8s var(--hx-ease);pointer-events:none}
html.hx-live .hj-step.is-on,html.hx-live .hj-stage.is-on{opacity:1;transform:translateY(-50%);pointer-events:auto}
html.hx-live .hj-step.is-past,html.hx-live .hj-stage.is-past{transform:translateY(calc(-50% - 44px))}

/* ============ focus: general (onboarding skipped) ============ */
.hj-focus{background:var(--hx-stone);color:var(--hx-text)}
.hj-general[hidden],.hj-mine[hidden]{display:none!important}
html.hx-live .hj-general{height:540vh}
.hj-sit{font-size:clamp(40px,5.2vw,88px)!important;line-height:.98!important;letter-spacing:-.05em;font-weight:800;max-width:15ch;text-wrap:balance}
.hj-promise{margin-top:18px!important;font-size:clamp(20px,1.8vw,26px);font-weight:600;letter-spacing:-.02em;color:var(--hx-accent)}
.hj-svcs{display:grid;grid-template-columns:repeat(2,minmax(0,420px));gap:14px;margin-top:30px}
.hj-svc{position:relative;display:block;padding:22px 56px 22px 24px;border-radius:20px;background:var(--hx-white);box-shadow:inset 0 0 0 1px var(--hx-line);text-decoration:none;color:var(--hx-text);transition:transform .35s var(--hx-ease),box-shadow .35s}
.hj-svc strong{display:block;font-size:18.5px;letter-spacing:-.02em;margin-bottom:6px}
.hj-svc span{display:block;font-size:15px;line-height:1.5;color:var(--hx-muted)}
.hj-svc svg{position:absolute;right:22px;top:24px;width:20px;height:20px;color:var(--hx-accent)}
.hj-svc:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px var(--hx-accent),0 20px 40px -28px #1a0a1066}
.hj-this{appearance:none;display:inline-flex;align-items:center;gap:12px;margin-top:22px;min-height:48px;padding:0 22px;border-radius:999px;border:1.5px solid var(--hx-accent);background:none;color:var(--hx-accent);font:inherit;font-size:15px;font-weight:600;cursor:pointer;transition:background .3s,color .3s}
.hj-this svg{width:18px;height:18px}
.hj-this:hover{background:var(--hx-wine);border-color:var(--hx-wine);color:#fbf6ee}
html[data-theme=dark] .hj-this:hover{background:#e9cfaa;color:#1f1a1b}
.hj-svc:focus-visible,.hj-all:focus-visible,.hj-this:focus-visible{outline:2px solid var(--hx-accent);outline-offset:4px}
.hj-all{display:inline-flex;align-items:center;gap:12px;margin-top:40px;min-height:44px;font-size:15px;font-weight:600;color:var(--hx-accent);text-decoration:none}
.hj-all svg{width:20px;height:20px}
html.hx-live .hj-all{position:absolute;left:var(--hx-bleed);bottom:6vh;margin:0}

/* ============ focus: yours (onboarding answered) ============ */
/* ============ focus: onboarding answered. A route draws itself from where the visitor is to where we go together ============ */
.hj-mine{position:relative;--gx:10%;background:var(--hx-stone)}
.hj-mine-stick{display:flex;flex-direction:column;justify-content:center;gap:clamp(20px,3.4svh,40px);padding:120px 0 90px;box-sizing:border-box;overflow:hidden}
html.hx-live .hj-mine-stick{padding:88px 0 44px}
.hj-mine-glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(34% 46% at var(--gx) 55%,#e9cfaa8c 0%,#e9cfaa00 70%),radial-gradient(44% 50% at 100% 0%,#72253a1a 0%,#72253a00 70%)}
html[data-theme=dark] .hj-mine-glow{background:radial-gradient(34% 46% at var(--gx) 55%,#72253a70 0%,#72253a00 70%),radial-gradient(44% 50% at 100% 0%,#e9cfaa14 0%,#e9cfaa00 70%)}
.hj-mine-top{position:relative;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:56px;align-items:end}
.hj-mine-label{display:flex;align-items:center;gap:16px;font-size:12.5px!important;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--hx-accent)}
.hj-mine-label i{position:relative;width:9px;height:9px;border-radius:50%;background:var(--hx-accent)}
html.hx-live .hj-mine-label i:after{content:'';position:absolute;inset:-3px;border-radius:50%;box-shadow:0 0 0 1.5px var(--hx-accent);animation:hj-pulse 2.4s var(--hx-ease) infinite}
.hj-mine-hello{margin-top:18px!important;font-size:19px;font-weight:600;color:var(--hx-muted)}
.hj-mine-quote{margin-top:14px!important;font-size:clamp(38px,4.5vw,74px)!important;line-height:.98!important;letter-spacing:-.055em;font-weight:800;text-wrap:balance;max-width:16ch}
.hj-mine-quote span{color:var(--hx-accent)}
.hj-mine-told{font-size:17px;line-height:1.55;color:var(--hx-muted);max-width:340px}
.hj-mine-side .hj-change{margin-top:14px}
.hj-mine-acts{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:22px}
.hj-route{--rh:clamp(104px,15svh,150px);--cw:240px;--ch:150px;--d:1;position:relative;height:calc(var(--rh) + 26px + var(--ch));margin:0 var(--hx-bleed)}
.hj-route-svg{position:absolute;left:0;top:0;width:100%;height:var(--rh);overflow:visible}
.hj-route-base,.hj-route-line{fill:none;vector-effect:non-scaling-stroke;stroke-linecap:round}
.hj-route-base{stroke:var(--hx-muted);stroke-opacity:.35;stroke-width:2;stroke-dasharray:2 9}
.hj-route-line{stroke:url(#hj-route-grad);stroke-width:4}
.hj-route-head{position:absolute;top:calc(var(--rh) * var(--f,.8));width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:#fbf6ee;box-shadow:0 0 0 5px #72253a,0 0 34px 12px #e9cfaa;pointer-events:none;transition:opacity .3s}
.hj-way-dot{display:block;width:14px;height:14px;border-radius:50%;background:var(--hx-stone);box-shadow:inset 0 0 0 2px var(--hx-muted);transition:background .5s,box-shadow .5s,transform .5s var(--hx-ease)}
.hj-route-start{position:absolute;left:0;top:calc(var(--rh) * .8 - 42px);display:flex;align-items:center;gap:12px;font-size:12px!important;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--hx-muted)}
.hj-route-start .hj-way-dot{background:#e9cfaa;box-shadow:none}
.hj-route-start .hj-way-dot{position:absolute;left:12px;top:35px}
.hj-way,.hj-route-end{position:absolute;top:calc(var(--rh) * var(--f,.5));transform:translate(-7px,-7px)}
.hj-route-end{left:98.5%!important;top:calc(var(--rh) * .2333);transform:translate(-11px,-11px)}
.hj-way:before{content:'';position:absolute;left:6.5px;top:18px;width:1px;height:calc(var(--rh) * (1 - var(--f,.5)) + 12px);background:linear-gradient(var(--hx-accent),transparent);opacity:0;transition:opacity .6s}
.hj-way.is-on:before{opacity:.6}
.hj-way-card{position:absolute;left:calc(29px - var(--cw));top:calc(var(--rh) * (1 - var(--f,.5)) + 33px);width:var(--cw);box-sizing:border-box;padding:18px 20px 20px;border-radius:20px;background:var(--hx-white);box-shadow:0 30px 60px -36px #1a0a1066,inset 0 0 0 1px var(--hx-line);transition:opacity .6s var(--hx-ease),transform .7s var(--hx-ease)}
.hj-way-n{font-size:12px!important;font-weight:800;letter-spacing:.16em;color:var(--hx-accent)}
.hj-way-t{margin-top:8px!important;font-size:clamp(15.5px,1.2vw,18.5px);line-height:1.38;font-weight:700;letter-spacing:-.015em;color:var(--hx-text)}
.hj-way-c:empty{display:none}
.hj-way.is-on .hj-way-dot{background:#72253a;box-shadow:0 0 0 5px #e9cfaa80;transform:scale(1.15)}
html[data-theme=dark] .hj-way.is-on .hj-way-dot{background:#e9cfaa;box-shadow:0 0 0 5px #72253a}
html.hx-live .hj-way:not(.is-on) .hj-way-card{opacity:0;transform:translateY(16px)}
.hj-way-dot.is-end{width:22px;height:22px;background:var(--hx-stone);box-shadow:inset 0 0 0 2px var(--hx-muted)}
.hj-route-end.is-on .hj-way-dot.is-end{background:#72253a;box-shadow:0 0 0 7px #e9cfaa99,0 0 50px 14px #e9cfaa}
.hj-dest{position:absolute;right:0;top:calc(var(--rh) + 26px);width:var(--cw);box-sizing:border-box;padding:18px 20px 22px;border-radius:20px;background:linear-gradient(150deg,#8a3148,#4a0f1a);color:#fbf6ee;box-shadow:0 40px 70px -34px #4a0f1acc;transition:opacity .7s var(--hx-ease),transform .7s var(--hx-ease)}
.hj-dest:before{content:'';position:absolute;right:calc(1.5% - 1px);bottom:100%;width:1px;height:calc(var(--rh) * .7667 + 14px);background:linear-gradient(transparent,#72253a);opacity:.6}
.hj-route-label{font-size:11.5px!important;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#e9cfaa}
.hj-route-dest{margin-top:8px!important;font-size:clamp(20px,1.7vw,27px)!important;line-height:1.08!important;letter-spacing:-.035em;font-weight:800;color:#fbf6ee;text-wrap:balance}
html.hx-live .hj-route-end:not(.is-on)+.hj-dest{opacity:0;transform:translateY(16px)}
.hj-mine-foot{position:relative;display:flex;align-items:center;gap:12px 22px;flex-wrap:wrap}
.hj-mine-foot-label{font-size:12px!important;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--hx-muted)}
.hj-mine-svcs{display:flex;flex-wrap:wrap;gap:10px}
.hj-mine-svc{display:inline-flex;align-items:center;gap:12px;padding:12px 18px;border-radius:999px;background:var(--hx-white);box-shadow:inset 0 0 0 1px var(--hx-line);color:var(--hx-text);text-decoration:none;font-size:15.5px;font-weight:700;letter-spacing:-.01em;transition:transform .35s var(--hx-ease),background .35s,color .35s}
.hj-mine-svc svg{width:16px;height:16px;color:var(--hx-accent)}
.hj-mine-svc:hover{background:#72253a;color:#fbf6ee;transform:translateY(-2px)}
.hj-mine-svc:hover svg{color:#e9cfaa}
.hj-mine-svc:focus-visible{outline:2px solid var(--hx-accent);outline-offset:3px}

/* ============ approach: follows the focus; light in the light theme, dark in the dark theme ============ */
.hj-method{--m-bg:#f7f3ee;--m-glow1:#e9cfaa80;--m-glow2:#72253a1f;--m-stroke:#72253a24;background:var(--m-bg);color:var(--hx-text)}
html[data-theme=dark] .hj-method{--m-bg:#0b0709;--m-glow1:#e9cfaa24;--m-glow2:#72253a55;--m-stroke:#e9cfaa2e}
.hj-method-glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(38% 48% at calc(18% + 64% * var(--p,0)) 32%,var(--m-glow1) 0%,transparent 72%),radial-gradient(48% 58% at 86% 86%,var(--m-glow2) 0%,transparent 72%)}
.hj-method-big{display:none}
html.hx-live .hj-method-big{display:block;position:absolute;right:calc(var(--hx-bleed) - .06em);bottom:-.14em;font-size:min(40vw,560px);line-height:1;font-weight:800;letter-spacing:-.07em;color:transparent;-webkit-text-stroke:1px var(--m-stroke);pointer-events:none}
.hj-seq{margin-top:12px!important;font-size:14px;letter-spacing:.03em;color:var(--hx-muted)}
.hj-method-nav{display:grid;grid-template-columns:repeat(var(--n,6),minmax(0,1fr))}
.hj-stage-name{font-size:13px!important;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--hx-accent)}
.hj-stage-line{margin-top:14px!important;font-size:clamp(36px,4.8vw,80px)!important;line-height:1!important;letter-spacing:-.05em;font-weight:800;max-width:15ch;text-wrap:balance}
.hj-stage-more{margin-top:22px!important;font-size:19px;line-height:1.55;color:var(--hx-muted);max-width:620px}
.hj-stage-evidence{margin-top:18px!important;font-size:15px;line-height:1.5;color:var(--hx-muted);max-width:620px;padding-left:16px;border-left:2px solid var(--hx-accent)}
.hj-stage-evidence span{display:block;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--hx-accent);margin-bottom:4px}
.hj-method-cta{margin-top:48px}
html.hx-live .hj-method-cta{position:absolute;left:var(--hx-bleed);bottom:6vh;margin:0}

/* ============ financial visibility ============ */
.hj-visual{--p:0;--v-bg:#eae0d2;--v-band:#d7c5b066;--v-plane:#4a0f1a;--v-plane2:#72253a;--v-dim:#eae0d2c7;--v-frame:#fbf6ee;background:var(--v-bg);
 color:#20191a;--hx-text:#20191a;--hx-muted:#4a3f40;--hx-accent:#72253a}
.hj-visual .hj-stick{background:linear-gradient(118deg,transparent calc(56% - var(--p) * 10%),var(--v-band) calc(56% - var(--p) * 10%) calc(66% - var(--p) * 10%),transparent calc(66% - var(--p) * 10%)),
  linear-gradient(118deg,transparent calc(66% - var(--p) * 10%),var(--v-plane) calc(66% - var(--p) * 10%),var(--v-plane2) 100%)}
html[data-theme=dark] .hj-visual{--v-bg:#351b22;--v-band:#e9cfaa12;--v-plane:#72253a;--v-plane2:#9a3a52;--v-dim:#351b22bd;--v-frame:#efe6da;color:#fbf6ee;--hx-text:#fbf6ee;--hx-muted:#e4d8cc;--hx-accent:#e9cfaa}
.hj-visual:before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;background-image:linear-gradient(#72253a0f 1px,transparent 1px),linear-gradient(90deg,#72253a0f 1px,transparent 1px);background-size:64px 64px;-webkit-mask:linear-gradient(90deg,#000 0%,#0000 55%);mask:linear-gradient(90deg,#000 0%,#0000 55%)}
html[data-theme=dark] .hj-visual:before{background-image:linear-gradient(#e9cfaa0d 1px,transparent 1px),linear-gradient(90deg,#e9cfaa0d 1px,transparent 1px)}
.hj-visual .hj-stick{display:grid;grid-template-columns:minmax(0,4.2fr) minmax(0,7.8fr);gap:48px;align-items:center;padding:120px var(--hx-bleed) 90px;box-sizing:border-box}
html.hx-live .hj-visual .hj-stick{padding:96px var(--hx-bleed) 64px}
.hj-vis-copy{position:relative}
.hj-vis-copy h2{font-size:clamp(40px,4.6vw,72px)!important;color:var(--hx-text)}
.hj-visual .hx-kicker{color:var(--hx-accent)}
.hj-vqs{display:grid;margin-top:36px}
.hj-vq{grid-area:1/1}
html:not(.hx-live) .hj-vqs{gap:40px}
html:not(.hx-live) .hj-vq{grid-area:auto}
html.hx-live .hj-vq{opacity:0;transform:translateY(24px);transition:opacity .7s var(--hx-ease),transform .7s var(--hx-ease);pointer-events:none}
html.hx-live .hj-vq.is-on{opacity:1;transform:none;pointer-events:auto}
html.hx-live .hj-vq.is-past{transform:translateY(-24px)}
.hj-vq-n{font-size:12px!important;font-weight:700;letter-spacing:.22em;color:var(--hx-accent)}
.hj-vq-q{margin-top:12px!important;font-size:clamp(28px,2.8vw,44px)!important;line-height:1.06!important;letter-spacing:-.04em;font-weight:800;text-wrap:balance}
.hj-vq-a{margin-top:16px!important;font-size:18px;line-height:1.55;color:var(--hx-muted);max-width:440px}
.hj-vq-tag{margin-top:18px!important;display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:var(--hx-text);padding:9px 14px;border-radius:999px;background:#fbf6ee99;box-shadow:inset 0 0 0 1px #72253a2e}
html[data-theme=dark] .hj-vq-tag{background:#fbf6ee12;box-shadow:inset 0 0 0 1px #e9cfaa40}
.hj-vq-tag span{font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--hx-accent)}
.hj-vis-stage{position:relative;height:min(76svh,720px);border-radius:26px;overflow:hidden;background:var(--v-frame);box-shadow:0 70px 120px -60px #2a0911b3,0 0 0 10px #fbf6ee66,inset 0 0 0 1px #72253a1f}
html[data-theme=dark] .hj-vis-stage{box-shadow:0 70px 120px -60px #0b0709,0 0 0 10px #e9cfaa14,inset 0 0 0 1px #e9cfaa2e}
.hj-vis-stage:after{content:'';position:absolute;inset:-20%;z-index:2;pointer-events:none;background:linear-gradient(105deg,transparent 40%,#fff9ee8c 50%,transparent 60%);transform:translateX(-120%);opacity:0}
html.hx-live .hj-vis-stage.is-moving:after{animation:hj-sheen 1.5s cubic-bezier(.65,.05,.25,1) .15s}
@keyframes hj-sheen{0%{transform:translateX(-120%);opacity:1}100%{transform:translateX(120%);opacity:1}}
.hj-vis-canvas{position:absolute;left:0;top:0;width:1366px;height:1539px;transform-origin:0 0;transition:transform 1.3s cubic-bezier(.65,.05,.25,1)}
.hj-vis-canvas img{display:block;width:1366px;height:1539px;max-width:none;border-radius:6px}
.hj-vis-spot{position:absolute;border-radius:14px;box-shadow:0 0 0 4000px var(--v-dim),0 0 0 3px #72253a,0 0 0 9px #e9cfaa73,0 30px 70px -10px #2a091166;transition:left 1.3s cubic-bezier(.65,.05,.25,1),top 1.3s cubic-bezier(.65,.05,.25,1),width 1.3s cubic-bezier(.65,.05,.25,1),height 1.3s cubic-bezier(.65,.05,.25,1),opacity .8s;pointer-events:none}
.hj-vis-note{position:absolute;right:var(--hx-bleed);bottom:22px;font-size:12.5px;color:#fbf6eecc}
html:not(.hx-live) .hj-vis-note{position:static;grid-column:1/-1}

/* ============ support ============ */
.hj-support{position:relative;isolation:isolate;overflow:hidden;background:#0b0709;color:#fbf6ee;--hx-text:#fbf6ee;--hx-muted:#e4d8cc;--hx-accent:#e9cfaa}
.hj-support-photo{margin:0;position:relative;width:100%;height:min(75vw,118svh);overflow:hidden}
.hj-support-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0%}
.hj-support-photo:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#0b0709 0%,#0b0709e6 16%,#0b070900 46%)}
.hj-support-in{position:absolute;left:0;right:0;bottom:64px;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:56px;align-items:end}
.hj-support h2{font-size:clamp(40px,4.6vw,76px)!important;color:#fbf6ee!important;max-width:12ch}
.hj-support-why{font-size:20px;line-height:1.5;color:#fbf6ee;font-weight:500}
.hj-support-team{margin-top:16px!important;font-size:17px;line-height:1.55;color:#e4d8cc}
.hj-support .hx-actions{margin-top:26px}

/* ============ industries ============ */
.hj-ind{position:relative;isolation:isolate;overflow:hidden;background:#0b0709;min-height:min(980px,110svh);display:flex;align-items:center;padding:120px 0;--hx-text:#fbf6ee;--hx-muted:#e4d8cc;--hx-accent:#e9cfaa;color:var(--hx-text)}
.hj-ind-media{position:absolute;inset:0;z-index:-1}
.hj-ind-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.04);transition:opacity 1.1s var(--hx-ease),transform 6s linear;filter:brightness(.72)}
.hj-ind-media img.is-on{opacity:1;transform:none}
.hj-ind-media:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#0b0709f2 0%,#0b0709cc 40%,#0b070933 100%)}
.hj-ind-in{width:100%}
.hj-ind-head{max-width:1000px}
.hj-ind-head h2{margin-top:18px!important}
.hj-ind h2{color:#fbf6ee;max-width:14ch}
.hj-ind-list{list-style:none;margin:48px 0 0;padding:0;display:grid;gap:2px;max-width:640px}
.hj-ind-list a{display:grid;grid-template-columns:44px 1fr;column-gap:10px;padding:10px 0;color:#fbf6ee99;text-decoration:none;font-size:clamp(20px,1.9vw,28px);font-weight:700;letter-spacing:-.025em;line-height:1.2;transition:color .35s}
.hj-ind-n{font-size:12px;font-weight:700;letter-spacing:.14em;color:#e9cfaa;padding-top:.6em}
.hj-ind-list small{grid-column:2;font-size:15px;font-weight:500;letter-spacing:0;color:var(--hx-muted);max-height:0;overflow:hidden;opacity:0;transition:max-height .5s var(--hx-ease),opacity .5s}
.hj-ind-list a[aria-current=true]{color:#fbf6ee}
.hj-ind-list a[aria-current=true] small{max-height:3em;opacity:1;margin-top:4px}
.hj-ind-list a:focus-visible{outline:2px solid var(--hx-champ);outline-offset:3px}

/* ============ close: a sentence the visitor completes ============ */
.hj-close{position:relative;isolation:isolate;overflow:hidden;background:var(--hx-ivory);color:var(--hx-text);padding:120px 0 110px}
.hj-close-light{position:absolute;inset:-30% -10%;z-index:-1;background:conic-gradient(from 200deg at 50% 50%,#e9cfaa00,#e9cfaa66,#72253a26,#e9cfaa00 70%);filter:blur(60px);opacity:.8}
html.hx-live .hj-close-light{animation:hj-sweep 18s linear infinite}
@keyframes hj-sweep{to{transform:rotate(360deg)}}
html[data-theme=dark] .hj-close-light{background:conic-gradient(from 200deg at 50% 50%,#72253a00,#72253a66,#e9cfaa1f,#72253a00 70%)}
.hj-sentence{margin-top:8px!important;font-size:clamp(34px,4.4vw,72px)!important;line-height:1.18!important;letter-spacing:-.045em;font-weight:800;max-width:24ch;text-wrap:balance}
.hj-slot{position:relative;display:inline-block;vertical-align:baseline}
.hj-slot select{appearance:none;-webkit-appearance:none;font:inherit;letter-spacing:inherit;color:var(--hx-accent);background:none;border:0;padding:0 .9em 0 0;margin:0;cursor:pointer;width:var(--w,auto);max-width:100%;border-bottom:3px solid currentColor;border-radius:0;line-height:1.05}
.hj-slot:after{content:'';position:absolute;right:.12em;top:50%;width:.26em;height:.26em;border-right:3px solid var(--hx-accent);border-bottom:3px solid var(--hx-accent);transform:translateY(-70%) rotate(45deg);pointer-events:none}
.hj-slot select:focus-visible{outline:2px solid var(--hx-accent);outline-offset:6px}
.hj-slot select option{font-size:16px;letter-spacing:0;font-weight:500;color:#1f1a1b}
.hj-close-go{display:flex;flex-wrap:wrap;align-items:center;gap:16px 30px;margin-top:40px}
.hj-close-note{margin-top:16px!important;font-size:14.5px;color:var(--hx-muted)}

@media (max-width:900px){
 html.hx-live .hj-mine-stick{position:relative;height:auto;overflow:visible;padding:84px 0 80px;justify-content:flex-start;gap:26px}
 .hj-mine-quote{font-size:34px!important}.hj-mine-hello{font-size:16px;margin-top:12px!important}.hj-mine-told{font-size:15px}
 .hj-route{height:auto!important;margin:0 var(--hx-bleed);display:grid;gap:12px;padding-left:28px}
 .hj-route:before,.hj-route:after{content:'';position:absolute;left:6px;top:8px;bottom:8px;width:2px;border-radius:2px;background:var(--hx-line)}
 .hj-route:after{background:linear-gradient(#e9cfaa,#72253a);transform-origin:top;transform:scaleY(var(--d))}
 .hj-route-svg,.hj-route-head,.hj-way:before,.hj-dest:before{display:none}
 .hj-route-start{position:relative;left:auto;bottom:auto;top:auto;transform:none;margin-left:-28px;gap:14px;font-size:11px!important}
 .hj-way,.hj-route-end{position:relative;transform:none;left:auto!important;top:auto!important;right:auto}
 .hj-route-end{position:absolute;left:0!important;bottom:18px;top:auto!important}
 .hj-way-dot{position:absolute;left:-28px;top:18px;z-index:1}
 .hj-route-start .hj-way-dot{position:relative;left:auto;top:auto}
 .hj-way-card,.hj-dest{position:relative;left:auto;right:auto;top:auto;width:auto;padding:12px 16px;border-radius:16px}
 .hj-way-t{font-size:15px;margin-top:4px!important}
 .hj-way-dot.is-end{position:relative;left:-4px}
 .hj-route-dest{font-size:22px!important}
 .hj-mine-foot{gap:14px}.hj-mine-svc{font-size:14px;padding:10px 14px}
}
@media (max-width:1000px){
 .hj-lead{white-space:normal;text-wrap:balance}
 .hj-svcs{grid-template-columns:1fr;max-width:560px}
 .hj-mine-top{grid-template-columns:1fr;gap:18px}
 .hj-visual .hj-stick{background:linear-gradient(170deg,var(--v-plane2) 0%,var(--v-plane) calc(30% + var(--p) * 8%),transparent calc(30% + var(--p) * 8%))}
 .hj-visual .hj-stick{grid-template-columns:1fr;gap:28px;align-content:center}
 html.hx-live .hj-visual .hj-stick{padding:84px var(--hx-bleed) 40px}
 .hj-vis-stage{height:min(44svh,460px);order:-1}
 .hj-vis-copy h2{font-size:30px!important}
 .hj-vqs{margin-top:16px}
 .hj-support-photo{max-height:none}
 .hj-support-in{position:static;grid-template-columns:1fr;gap:20px;padding-top:0;margin-top:-12vw}
}
@media (max-width:700px){
 .hj-hero-in{padding-bottom:9vh}
 .hj-lead{font-size:22px!important}
 .hj-h1{font-size:min(54px,13.2vw)!important;padding-top:24px}.hj-sub{font-size:21px!important}
 html.hx-live .hj-scene-head{top:84px}
 html.hx-live .hx-scene h2,html.hx-live .hj-method h2{font-size:19px}
 html.hx-live .hx-scene .hx-steps-nav,html.hx-live .hj-method-nav{top:156px}
 html.hx-live .hj-step,html.hx-live .hj-stage{top:57%;right:56px}
 .hj-sit{font-size:34px!important}.hj-promise{font-size:17px}
 .hj-svcs{gap:8px;margin-top:18px}.hj-svc{padding:14px 44px 14px 16px;border-radius:16px}.hj-svc strong{font-size:16px}.hj-svc span{display:none}
 .hj-stage-line{font-size:32px!important}.hj-stage-more{font-size:16px}.hj-stage-evidence{font-size:14px}
 .hj-vq-q{font-size:24px!important}.hj-vq-a{font-size:15.5px}
 .hj-vq-tag{flex-direction:column;align-items:flex-start;gap:2px;border-radius:14px}
 .hj-vis-stage{height:40svh;border-radius:18px}
 .hj-support h2{font-size:36px!important}
 .hj-support-in{margin-top:-8vw}
 .hj-support-why{font-size:17px}
 .hj-ind{padding:90px 0}
 .hj-close{padding:84px 0 80px}
 .hj-sentence{font-size:30px!important}
 .hj-slot select{border-bottom-width:2px}
}

/* ============ client band: the hero's closing line, not a white strip (prototype override of the site's own band) ============
   Logos sit on the hero's dark base as soft light negatives; hover or focus shows each in its true colours on a small ivory tile. */
.credibility{background:#0b0709!important;border:0!important;box-shadow:none!important;height:auto!important;min-height:0!important;padding-top:26px!important;padding-bottom:34px!important;overflow-x:clip!important;overflow-y:visible!important}
.credibility>.client-viewport{padding:10px 0!important}
.credibility>.micro{color:#e9cfaa!important;opacity:.8}
html body .credibility .client-logo,html body .credibility .client-ribbon>img{border-radius:10px;transition:background .35s,box-shadow .35s}
html body .credibility .client-logo img,html body .credibility .client-ribbon>img{filter:grayscale(1) invert(1) brightness(1.08) contrast(.85)!important;opacity:.62!important;transition:filter .35s,opacity .35s}
html body .credibility .client-logo:hover,html body .credibility .client-logo:focus-visible{background:#fbf6ee!important;box-shadow:0 0 0 8px #fbf6ee}
html body .credibility .client-logo:hover img,html body .credibility .client-logo:focus-visible img{filter:none!important;opacity:1!important}
html body .credibility .client-logo:focus-visible{outline:2px solid #e9cfaa;outline-offset:10px}

/* ============ close: "Or send it by email" (Brevo contact route on biviti.com) ============ */
.hj-mail{margin-top:28px;max-width:760px}
.hj-mail[hidden]{display:none}
.hj-mail-fields{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) auto;gap:12px;align-items:end}
.hj-mail-field{display:grid;gap:6px;font-size:13px;font-weight:600;color:var(--hx-muted)}
.hj-mail-field em{font-style:normal;font-weight:400}
.hj-mail-field input{font:inherit;font-size:16px;font-weight:500;color:var(--hx-text);background:var(--hx-white);border:1px solid var(--hx-line);border-radius:14px;min-height:54px;padding:0 16px;box-sizing:border-box;width:100%}
.hj-mail-field input:focus-visible{outline:2px solid var(--hx-accent);outline-offset:2px}
.hj-mail-check{margin-top:14px;min-height:0}
.hj-mail-status{margin-top:10px!important;font-size:15px;font-weight:600;color:var(--hx-text);min-height:1.4em}
.hj-mail-note{margin-top:4px!important;font-size:13.5px;color:var(--hx-muted)}
@media (max-width:700px){.hj-mail-fields{grid-template-columns:1fr}.hj-mail-fields .hx-btn{justify-self:start}}

/* ============ Free Biviti Advisor section (kept as-is): never clipped ============
   Its preview panels are absolutely positioned inside a fixed-height stage, and the results panel grows taller than the stage
   as its text wraps (47px at 1440, up to 167px at 1251 and 810). The section now grows with its content; home-journey.js sizes
   the stage to its tallest panel. */
main>.advisor-introduction{height:auto!important;min-height:0!important;padding-bottom:72px!important;overflow-x:clip!important;overflow-y:visible!important}
main>.advisor-introduction .advisor-stage{min-height:var(--adv-stage,auto)}

/* ============ Hero "Keep Up" (owner-approved 2026-09-30; from concepts/hero-options, Option A) ============
   Type and warm light instead of the photograph About Biviti also opens with. Follows the theme; the header, the client band and
   the next section's opening are tuned for it on this page only (body.hh-page). Static and complete under reduced motion. */
html.hx-live .hh-hero.hj-hero{height:auto}
.hh-hero{position:relative;isolation:isolate;overflow:hidden;min-height:100svh;background:#0b0709;color:#fbf6ee}
.hh-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hh-hero .hj-greet{margin-bottom:26px!important}
.hh-h1{margin:0!important;color:#fbf6ee;font-size:clamp(34px,3.9vw,64px)!important;line-height:.98!important;letter-spacing:-.05em!important;font-weight:800!important}
.hh-h1 span{color:#fbf6ee}
.hh-after{margin-top:18px}
.hh-sub{margin:0!important;font-size:clamp(19px,1.7vw,26px)!important;line-height:1.2!important;letter-spacing:-.025em;font-weight:600;color:#e9cfaa!important}
.hh-p{margin:14px 0 0!important;max-width:560px;font-size:17px;line-height:1.6;color:#e4d8cc}
.hh-hero .hx-actions{margin-top:30px}
.hh-hero a:focus-visible{outline:2px solid #e9cfaa;outline-offset:4px}
/* ============ A  Keep Up (owner's choice; v2: follows the theme, no grid, tighter, one seamless stage with the client band) ============ */
.hh-a{--a-bg:#fbf9f6;--a-text:#1f1a1b;--a-muted:#5a5153;--a-ghost:#1f1a1b4d;--a-accent:#72253a;--a-glow:#72253a24;--a-rule:linear-gradient(90deg,#72253a,#e9cfaa);
 min-height:0;display:block;background:var(--a-bg);color:var(--a-text)}
html[data-theme=dark] .hh-a{--a-bg:#0b0709;--a-text:#fbf6ee;--a-muted:#e4d8cc;--a-ghost:#e4d8cc66;--a-accent:#e9cfaa;--a-glow:#72253a5c;--a-rule:linear-gradient(90deg,#e9cfaa,#72253a)}
/* the warm light follows the pointer; it fades out before the bottom edge, so the stage runs on into the client band without a seam */
.hh-a-light{position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(760px circle at var(--mx,72%) var(--my,38%),var(--a-glow),transparent 64%);
 -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 100%);mask-image:linear-gradient(180deg,#000 55%,transparent 100%)}
.hh-a-in{position:relative;width:100%;box-sizing:border-box;padding:170px var(--hx-bleed) 44px}
.hh-a .hj-greet{color:var(--a-accent)!important}.hh-a .hj-greet:before{background:var(--a-accent)!important}
.hh-a-lines{position:relative;margin-bottom:44px}
.hh-a-l1,.hh-a-l2{margin:0!important;font-size:clamp(40px,5.2vw,88px)!important;line-height:1.02!important;letter-spacing:-.055em;font-weight:800;white-space:nowrap}
.hh-a-l1{color:var(--a-text)}
.hh-a-l2{color:var(--a-ghost);transition:color .8s}
.hh-a.is-locked .hh-a-l2{color:var(--a-accent)}
.hh-w{display:inline-block;will-change:transform}
.hh-a-rule{position:absolute;left:0;right:0;bottom:-22px;height:2px;background:var(--a-rule);transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--hx-ease)}
.hh-a.is-locked .hh-a-rule{transform:scaleX(1)}
.hh-a .hh-h1,.hh-a .hh-h1 span{color:var(--a-text)}
.hh-a .hh-sub{color:var(--a-accent)!important}
.hh-a .hh-p{margin-top:16px!important;max-width:680px;font-size:clamp(19px,1.55vw,23px);line-height:1.5;color:var(--a-muted)}
.hh-a .hx-link{color:var(--a-accent)}
html:not([data-theme=dark]) .hh-a .hx-btn{background:#72253a;color:#fbf6ee}
html:not([data-theme=dark]) .hh-a .hx-btn:hover{background:#5d1c2f;box-shadow:0 14px 34px -18px #72253a}
.hh-a a:focus-visible{outline-color:var(--a-accent)}
html.hx-live .hh-a .hh-h1,html.hx-live .hh-a .hh-after,html.hx-live .hh-a .hj-greet{opacity:0;transform:translateY(18px);transition:opacity .9s var(--hx-ease),transform .9s var(--hx-ease)}
html.hx-live .hh-a.is-ready .hh-h1,html.hx-live .hh-a.is-ready .hh-after,html.hx-live .hh-a.is-ready .hj-greet{opacity:1;transform:none}
html.hx-live .hh-a.is-ready .hh-after{transition-delay:.15s}
/* the header reads over the light stage in the light theme */
html:not([data-theme=dark]) .hh-page .hj-bar .masthead{color:#1f1a1b}
html:not([data-theme=dark]) .hh-page .hj-bar .masthead :is(.navigation-study>a,.navigation-study button,.nav-split-link,.mobile-menu-toggle){color:#1f1a1b!important}
html:not([data-theme=dark]) .hh-page .hj-bar .wordmark-ivory{filter:brightness(0) saturate(100%)!important;opacity:.9}
html:not([data-theme=dark]) .hh-page .hj-bar :is(.theme-control,.mobile-menu-toggle){color:#1f1a1b!important;border-color:#1f1a1b40!important;background:transparent!important}
html:not([data-theme=dark]) .hh-page .hj-bar .theme-control svg{stroke:#1f1a1b;fill:none}
/* the client band continues the hero's stage, then eases into the next section's tone */
.hh-page .credibility{background:linear-gradient(180deg,var(--band-top) 0%,var(--band-top) 45%,var(--band-end) 100%)!important;padding-top:6px!important;padding-bottom:38px!important;
 --band-top:#fbf9f6;--band-end:var(--hx-stone)}
html[data-theme=dark] .hh-page .credibility{--band-top:#0b0709}
html:not([data-theme=dark]) .hh-page .credibility>.micro{color:#72253a!important;opacity:.85}
html:not([data-theme=dark]) body.hh-page .credibility .client-logo img,html:not([data-theme=dark]) body.hh-page .credibility .client-ribbon>img{filter:grayscale(1) contrast(1.05)!important;opacity:.55!important}
/* light theme: no box on hover; the logo simply returns to its own colour on the ivory stage */
html:not([data-theme=dark]) body.hh-page .credibility .client-logo:hover,html:not([data-theme=dark]) body.hh-page .credibility .client-logo:focus-visible{background:transparent!important;box-shadow:none!important}
html:not([data-theme=dark]) body.hh-page .credibility .client-logo:hover img,html:not([data-theme=dark]) body.hh-page .credibility .client-logo:focus-visible img{filter:none!important;opacity:1!important;transform:scale(1.04);transition:filter .35s,opacity .35s,transform .45s var(--hx-ease)}
/* the previous homepage opening left a dark overlay behind the header; this stage paints its own light */
.hh-page .hj-bar:after,.hh-page .hj-bar:before{display:none!important}
/* the next section's corner glow fades in from its top, so no edge shows where the band ends */
.hh-page .hj-mine-glow{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 220px);mask-image:linear-gradient(180deg,transparent 0,#000 220px)}
/* the next section starts closer: its opening scene no longer floats in the middle of a tall empty screen */
html.hx-live .hh-page .hj-mine-stick{justify-content:flex-start;padding-top:72px}

@media (max-width:700px){
 .hh-a-in{padding:124px var(--hx-edge) 36px}
 .hh-a-l1,.hh-a-l2{font-size:clamp(30px,9.6vw,44px)!important;white-space:normal}
 .hh-a-lines{margin-bottom:40px}
 .hh-h1{font-size:clamp(32px,9.4vw,40px)!important}
 /* owner (2026-10-03): "expertly implemented." stays on one line on phones; the heading scales to the line's measured width */
 .hh-h1{font-size:clamp(24px,calc((100vw - 2 * var(--hx-edge)) / 10.6),40px)!important}
 .hh-h1 span{white-space:nowrap}
}

/* v64 (owner, 2026-10-02): the first-time visitor opens on the onboarding over the live homepage, which stays visible behind it,
 softly blurred and dimmed (onboarding-signature.css), to feed curiosity. <html class="onb-first"> is set before first paint by
 assets/js/onboarding-boot.js so the homepage never flashes unblurred; the onboarding dialog then takes over. */
html.onb-first{overflow:hidden}
html.onb-first body>*:not(#personalize){filter:blur(6px) brightness(.62) saturate(.85)}
html[data-theme=light].onb-first body>*:not(#personalize){filter:blur(6px) saturate(.8)}
html.onb-reveal body{animation:onb-reveal .8s cubic-bezier(.2,.7,.2,1) both}
@keyframes onb-reveal{from{opacity:.6}}

/* v64 (owner, 2026-10-02): no flat white cards in "Where are you today" and "Your focus". The service cards, waypoint cards and
   route pills carry a warm champagne wash with a fine wine hairline (light) or a champagne hairline on the night tone (dark); on
   hover the wash deepens and a soft light sweeps across. */
.hj-svc,.hj-way-card,.hj-mine-svc{background:linear-gradient(145deg,rgba(233,207,170,.34) 0%,rgba(233,207,170,.07) 58%,rgba(233,207,170,.16) 100%);box-shadow:inset 0 0 0 1px rgba(114,37,58,.14),0 30px 60px -46px rgba(74,15,26,.35);isolation:isolate;overflow:hidden}
.hj-way-card{overflow:visible}
.hj-svc::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,rgba(255,246,228,.55) 48%,transparent 66%);background-size:260% 100%;background-position:120% 0;transition:background-position 1.1s cubic-bezier(.22,.8,.2,1)}
.hj-svc:hover::before,.hj-svc:focus-visible::before{background-position:-40% 0}
.hj-svc:hover,.hj-svc:focus-visible{background:linear-gradient(145deg,rgba(233,207,170,.5) 0%,rgba(233,207,170,.14) 58%,rgba(233,207,170,.26) 100%);box-shadow:inset 0 0 0 1px rgba(114,37,58,.32),0 30px 60px -36px rgba(74,15,26,.42)}
.hj-mine-svc:hover{background:#72253a}
html[data-theme=dark] :is(.hj-svc,.hj-way-card,.hj-mine-svc){background:linear-gradient(145deg,rgba(233,207,170,.11) 0%,rgba(233,207,170,.02) 58%,rgba(233,207,170,.06) 100%);box-shadow:inset 0 0 0 1px rgba(233,207,170,.18),0 30px 60px -46px rgba(0,0,0,.6)}
html[data-theme=dark] .hj-svc::before{background-image:linear-gradient(110deg,transparent 30%,rgba(233,207,170,.12) 48%,transparent 66%)}
html[data-theme=dark] .hj-svc:hover,html[data-theme=dark] .hj-svc:focus-visible{background:linear-gradient(145deg,rgba(233,207,170,.17) 0%,rgba(233,207,170,.04) 58%,rgba(233,207,170,.1) 100%);box-shadow:inset 0 0 0 1px rgba(233,207,170,.4),0 30px 60px -36px rgba(0,0,0,.7)}
html[data-theme=dark] .hj-mine-svc:hover{background:#e9cfaa;color:#1a1210}
html[data-theme=dark] .hj-mine-svc:hover svg{color:#72253a}
@media (prefers-reduced-motion:reduce){.hj-svc::before{transition:none}}
/* v66 audit (WCAG 2.4.1): the Homepage skip link, styled as on every other page */
.hh-skip{position:absolute;left:24px;top:-100px;z-index:1000;background:#f8f3ea;color:#4a0f1a!important;padding:12px;font-weight:600;text-decoration:none}.hh-skip:focus{top:12px;outline:2px solid #c9a97e;outline-offset:2px}
/* v66.1 audit (mobile menu legibility): in light theme the open mobile menu is the dark panel, so its links use ivory, as in dark
   theme and on every other page (the light masthead rule above made them dark on dark) */
html:not([data-theme=dark]) .hh-page .hj-bar .masthead .navigation-study.is-open :is(a,button){color:#f8f3ea!important}
/* v66.1 audit (phones): "Our approach" kept clear of itself at every phone height. The progress bar sits below the method
   sequence (it was drawn through it), and the stage is centred in the band between the bar and the button (it was centred on the
   screen, so on shorter phones it ran into the heading and the button); on short screens the stage type tightens. No copy is hidden. */
@media (max-width:700px){
 html.hx-live .hj-method-nav{top:232px}
 html.hx-live .hj-method .hj-stage{top:calc(284px + (100svh - 284px - 6vh - 64px) / 2)}
}
@media (max-width:700px) and (max-height:780px){
 .hj-method .hj-stage-line{font-size:26px!important;margin-top:10px!important}
 .hj-method .hj-stage-more{font-size:15px;line-height:1.45;margin-top:12px!important}
 .hj-method .hj-stage-evidence{font-size:13px;line-height:1.4;margin-top:10px!important}
}
@media (max-width:700px) and (max-height:680px){
 .hj-method .hj-stage-line{font-size:22px!important}
 .hj-method .hj-stage-more{font-size:14px;line-height:1.4}
 .hj-method .hj-stage-evidence{font-size:12.5px}
 html.hx-live .hj-method-cta{bottom:3vh}
 html.hx-live .hj-method .hj-stage{top:calc(284px + (100svh - 284px - 3vh - 64px) / 2)}
}
/* v66.1 audit (very short phone screens, 600 px tall or less, e.g. a small phone with browser bars): the pinned stage cannot fit
   without hiding copy, so "Our approach" shows its stages stacked in the page, as it does under reduced motion. */
@media (max-width:700px) and (max-height:600px){
 html.hx-live .hj-method{height:auto!important}
 html.hx-live .hj-method .hj-stick{position:relative;height:auto;overflow:visible;padding:96px var(--hx-bleed) 72px}
 html.hx-live .hj-method .hj-scene-head{position:static;margin-bottom:8px}
 html.hx-live .hj-method-nav{display:none}
 html.hx-live .hj-method .hj-stage{position:static;opacity:1;transform:none;pointer-events:auto;margin-top:36px}
 html.hx-live .hj-method-big{display:none}
 html.hx-live .hj-method-cta{position:static;margin-top:40px}
}
/* v66.1 audit (phones): "Financial visibility" fits the screen. The product caption sits right under the product image in the muted
   text colour (it was ivory at the foot of the screen, over the copy); on short screens the image and copy are more compact. */
@media (max-width:700px){
 .hj-visual .hj-vis-note{position:static;order:-1;margin:-8px 0 0;font-size:11.5px;line-height:1.4;color:var(--hx-muted);text-align:left}
}
@media (max-width:700px) and (max-height:780px){
 .hj-visual .hj-vis-stage{height:32svh}
 .hj-visual .hj-vis-copy h2{font-size:26px!important}
 .hj-visual .hj-vqs{margin-top:16px}
 .hj-visual .hj-vq-q{font-size:21px!important}
 .hj-visual .hj-vq-a{font-size:14.5px;line-height:1.45;margin-top:10px!important}
 .hj-visual .hj-vq-tag{margin-top:12px!important}
 html.hx-live .hj-visual .hj-stick{padding-top:84px;padding-bottom:28px;gap:18px}
}
@media (max-width:700px) and (max-height:700px){.hj-visual .hj-vis-stage{height:27svh}}
@media (max-width:700px) and (max-height:620px){.hj-visual .hj-vis-stage{height:23svh}.hj-visual .hj-vis-copy h2{font-size:23px!important}.hj-visual .hj-vq-q{font-size:19px!important}}
@media (max-width:700px) and (min-height:781px) and (max-height:900px){.hj-visual .hj-vis-stage{height:36svh}}
@media (max-width:700px) and (max-height:680px){html.hx-live .hj-visual .hj-stick{padding-top:66px;gap:14px}.hj-visual .hj-vq-a{font-size:14px;line-height:1.4}.hj-visual .hj-vq-tag{margin-top:10px!important;padding:7px 12px}}
/* v66.1 responsive remediation (2026-10-05): the pinned scenes fit the height of the screen as well as its width. Above phone
   widths they were laid out for tall screens only (fixed offsets, type sized by the width), so on short, wide screens (a laptop
   with browser bars, browser zoom, display scaling, a tablet or phone held sideways) their parts ran into each other. On screens
   as tall as the approved desktop compositions (about 900 px) nothing changes. On shorter screens the scene offsets and scene type scale with the height, between
   the approved desktop sizes and the approved phone sizes; home-journey.js measures each scene and keeps its active stage clear of
   the stage bar and the call to action (the stage moves only when it would touch either). A screen too short for even the most
   compact pinned scene shows that scene in the page instead (the stages stacked, as on short phones and under reduced motion;
   the route still draws as it passes). No copy is hidden. */
@media (min-width:701px){
 html.hx-live .hj-scene-head{top:calc(min(96px,max(36px,calc(16.8svh - 55px))) + var(--hj-lift,0px))}
 html.hx-live .hx-scene .hx-steps-nav,html.hx-live .hj-method-nav{top:var(--hj-nav,212px)}
 html.hx-live .hx-scene:not(.hj-flow) h2,html.hx-live .hj-method:not(.hj-flow) h2{font-size:min(clamp(22px,1.9vw,30px),max(19px,calc(2.67svh + 6px)))}
 /* approach stages */
 html.hx-live .hj-method:not(.hj-flow) .hj-stage-line{font-size:min(clamp(36px,4.8vw,80px),max(22px,calc(13svh - 40px)))!important;margin-top:min(14px,max(8px,calc(2.01svh - 4px)))!important;max-width:max(15ch,min(560px,100%))}
 html.hx-live .hj-method:not(.hj-flow) .hj-stage-more{font-size:min(19px,max(14px,calc(1.67svh + 4px)));margin-top:min(22px,max(10px,calc(4.01svh - 14px)))!important}
 html.hx-live .hj-method:not(.hj-flow) .hj-stage-evidence{font-size:min(15px,max(12.5px,calc(.84svh + 7.5px)));margin-top:min(18px,max(8px,calc(3.34svh - 12px)))!important}
 /* the situations (onboarding skipped) */
 html.hx-live .hx-scene:not(.hj-flow) .hj-sit{font-size:min(clamp(40px,5.2vw,88px),max(26px,calc(15svh - 53px)))!important}
 html.hx-live .hx-scene:not(.hj-flow) .hj-promise{font-size:min(clamp(20px,1.8vw,26px),max(17px,calc(2.34svh + 5px)));margin-top:min(18px,max(8px,calc(3.34svh - 12px)))!important}
 html.hx-live .hx-scene:not(.hj-flow) .hj-svcs{margin-top:min(30px,max(10px,calc(6.67svh - 30px)));gap:min(14px,max(8px,calc(2.01svh - 4px)))}
 html.hx-live .hx-scene:not(.hj-flow) .hj-svc{padding-top:min(22px,max(12px,calc(3.34svh - 8px)));padding-bottom:min(22px,max(12px,calc(3.34svh - 8px)))}
 html.hx-live .hx-scene:not(.hj-flow) .hj-svc strong{font-size:min(18.5px,max(15.5px,calc(1.21svh + 7.7px)))}
 html.hx-live .hx-scene:not(.hj-flow) .hj-svc span{font-size:min(15px,max(13px,calc(.81svh + 7.8px)))}
 html.hx-live .hx-scene:not(.hj-flow) .hj-this{margin-top:min(22px,max(8px,calc(4.67svh - 20px)))}
}
/* the call to action rests above the page controls dock (fixed, lower right; global-shell.css) on phones, where it reaches that
   corner; at every width the active stage stays in the band between the stage bar and the call to action (home-journey.js measures it) */
html.hx-live .hj-method-cta,html.hx-live .hj-all{bottom:calc(6vh + var(--hj-lift,0px))}
@media (max-width:700px){html.hx-live .hj-method-cta,html.hx-live .hj-all{bottom:max(var(--bv-dock-reserve,70px),6vh)}}
/* the page controls dock is fixed lower right: the hero's scroll cue and the dashboard's caption sit clear of its corner */
html.hx-live .hj-scroll{bottom:max(5vh,calc(var(--bv-dock-reserve,82px) + 8px))}
@media (min-width:1001px){html.hx-live .hj-visual:not(.hj-flow) .hj-vis-note{right:max(var(--hx-bleed),264px);max-width:300px;text-align:right;line-height:1.4}}
@media (max-width:700px){html.hx-live .hj-method-nav{top:var(--hj-nav,232px)}}
html.hx-live .hj-method .hj-stage,html.hx-live .hx-scene .hj-step{top:var(--hj-mid,clamp(calc(var(--hj-nb,256px) + 10px + var(--hj-sh,0px) / 2),56%,calc(var(--hj-ct,100svh) - 10px - var(--hj-sh,0px) / 2)))}
/* the scene in the page (too short to pin) */
html.hx-live :is(.hj-method,.hj-general).hj-flow{height:auto!important}
html.hx-live :is(.hj-method,.hj-general).hj-flow .hj-stick{position:relative;height:auto;overflow:visible;padding:96px var(--hx-bleed) 72px}
html.hx-live :is(.hj-method,.hj-general).hj-flow .hj-scene-head{position:static;margin-bottom:8px}
/* in the page, still scroll-driven: the stage bar stays pinned at the top while the stages pass beneath it, the stage being read is
   marked and fills the bar; a click on the bar scrolls to that stage (home-journey.js) */
html.hx-live :is(.hj-method,.hj-general).hj-flow :is(.hj-method-nav,.hx-steps-nav){display:grid;position:sticky;top:0;z-index:3;margin:20px 0 0;padding:14px 0 10px}
html.hx-live .hj-method.hj-flow .hj-method-nav{background:var(--m-bg)}
html.hx-live .hj-general.hj-flow .hx-steps-nav{background:var(--hx-stone)}
html.hx-live :is(.hj-method,.hj-general).hj-flow :is(.hj-stage,.hj-step){padding-left:16px;box-shadow:inset 2px 0 0 transparent;transition:box-shadow .4s}
html.hx-live :is(.hj-method,.hj-general).hj-flow :is(.hj-stage,.hj-step).is-on{box-shadow:inset 2px 0 0 var(--hx-accent)}
html.hx-live :is(.hj-method,.hj-general).hj-flow :is(.hj-stage,.hj-step){position:static;opacity:1;transform:none;pointer-events:auto;margin-top:36px}
html.hx-live .hj-method.hj-flow .hj-method-big{display:none}
html.hx-live :is(.hj-method,.hj-general).hj-flow :is(.hj-method-cta,.hj-all){position:static;margin-top:40px}
/* your focus: the route keeps its height (it was squeezed by the column, so the services row was drawn over the cards) */
@media (min-width:901px){
 .hj-route{flex-shrink:0}
 html.hx-live .hj-mine:not(.hj-flow) .hj-mine-stick{padding-bottom:max(calc(var(--bv-dock-reserve,82px) - 8px),min(44px,max(12px,calc(10.01svh - 46px))));gap:min(clamp(20px,3.4svh,40px),max(12px,calc(6svh - 22px)))}
 html.hx-live .hj-mine:not(.hj-flow) .hj-mine-quote{font-size:min(clamp(38px,4.5vw,74px),max(30px,calc(10svh - 15px)))!important}
 html.hx-live .hj-mine:not(.hj-flow) .hj-mine-hello{font-size:min(19px,max(16px,calc(1.21svh + 8.2px)));margin-top:min(18px,max(8px,calc(3.34svh - 12px)))!important}
 html.hx-live .hj-mine:not(.hj-flow) .hj-mine-told{font-size:min(17px,max(15px,calc(.81svh + 9.8px)))}
 html.hx-live .hj-mine:not(.hj-flow) .hj-mine-acts{margin-top:min(22px,max(12px,calc(4.01svh - 14px)));row-gap:min(14px,max(6px,calc(2.67svh - 10px)))}
 html.hx-live .hj-mine:not(.hj-flow) .hj-mine-side .hj-change{margin-top:min(14px,max(4px,calc(3.34svh - 16px)))}
 html.hx-live .hj-mine:not(.hj-flow) .hj-route{--rh:clamp(64px,min(15svh,calc(30svh - 115px)),150px)}
 html.hx-live .hh-page .hj-mine:not(.hj-flow) .hj-mine-stick{padding-top:min(72px,max(32px,calc(17svh - 63px)))}
 html.hx-live .hj-mine.hj-flow .hj-mine-stick{position:relative;height:auto;overflow:visible;padding:96px 0 72px}
}
/* financial visibility: side by side (wider screens) */
@media (min-width:1001px){
 html.hx-live .hj-visual:not(.hj-flow) .hj-stick{padding-top:min(96px,max(40px,calc(16.8svh - 55px)));padding-bottom:min(64px,max(20px,calc(10.01svh - 26px)))}
 html.hx-live .hj-visual:not(.hj-flow) .hj-vis-copy h2{font-size:min(clamp(40px,4.6vw,72px),max(26px,calc(10svh - 15px)))!important}
 html.hx-live .hj-visual:not(.hj-flow) .hj-vqs{margin-top:min(36px,max(14px,calc(6.67svh - 24px)))}
 html.hx-live .hj-visual:not(.hj-flow) .hj-vq-q{font-size:min(clamp(28px,2.8vw,44px),max(20px,calc(6.67svh - 16px)))!important}
 html.hx-live .hj-visual:not(.hj-flow) .hj-vq-a{font-size:min(18px,max(14.5px,calc(1.67svh + 3px)));margin-top:min(16px,max(8px,calc(3.01svh - 11px)))!important}
 html.hx-live .hj-visual:not(.hj-flow) .hj-vq-tag{margin-top:min(18px,max(10px,calc(3.01svh - 9px)))!important}
}
/* financial visibility in the page (too short to pin): every question with the whole dashboard, as under reduced motion */
html.hx-live .hj-visual.hj-flow{height:auto!important}
html.hx-live .hj-visual.hj-flow .hj-stick{position:relative;height:auto;overflow:visible;padding-top:96px;padding-bottom:72px}
html.hx-live .hj-visual.hj-flow .hj-vqs{gap:40px}
html.hx-live .hj-visual.hj-flow .hj-vq{grid-area:auto;opacity:1;transform:none;pointer-events:auto}
html.hx-live .hj-visual.hj-flow .hj-vis-note{position:static;grid-column:1/-1}
/* owner-approved refinements (2026-10-05): phones show each service's description in "Where are you today?" (it was hidden);
   the step uses the full width and tighter spacing, so the scene stays pinned on phones about 850 px tall or taller; shorter phones
   show it in the page (above) with nothing hidden */
@media (max-width:700px){
 .hj-svc span{display:block;font-size:13.5px;line-height:1.42;margin-top:3px}
 .hj-svc{padding:12px 40px 12px 14px}
 .hj-svc svg{right:14px;top:14px}
 html.hx-live .hx-scene:not(.hj-flow) .hj-step{right:var(--hx-bleed)}
 html.hx-live .hx-scene:not(.hj-flow) .hj-sit{font-size:min(34px,max(27px,calc(10.6svh - 44px)))!important}
 html.hx-live .hx-scene:not(.hj-flow) .hj-promise{margin-top:8px!important}
 html.hx-live .hx-scene:not(.hj-flow) .hj-svcs{margin-top:14px}
 html.hx-live .hx-scene:not(.hj-flow) .hj-this{margin-top:12px;min-height:44px}
 html.hx-live .hj-general.hj-flow .hj-step+.hj-step{padding-top:36px;border-top:1px solid var(--hx-line)}
}
/* "Your focus": the heading block and the services row span the content width at every width (between 701 and 1000 px the heading
   block shrank to its content and sat centred, out of line with the route) */
.hj-mine-top,.hj-mine-foot{width:calc(100% - 2 * var(--hx-edge))}
/* Free Biviti Advisor preview on phones (owner, 2026-10-06): every choice is shown (the list was capped at 260 px and scrolled, so the
   last choice was cut off), and the sample result reads as one column of cards instead of two narrow ones; same content and design */
@media (max-width:700px){
 .advisor-introduction .preview-choices{max-height:none!important;height:auto!important;overflow:visible!important}
 .advisor-introduction .preview-result-grid{grid-template-columns:1fr!important;gap:8px!important}
 .advisor-introduction .preview-result-grid article{padding:14px 16px!important;min-height:0!important}
}
/* the page controls dock is fixed lower right: on narrower screens (image above the copy) the dashboard caption sits under the
   image, as on phones, instead of in that corner */
@media (min-width:701px) and (max-width:1000px){.hj-visual .hj-vis-note{position:static;order:-1;margin:-8px 0 0;font-size:11.5px;line-height:1.4;color:var(--hx-muted);text-align:left}}
/* "Financial visibility" in the page (a screen too short to pin the whole scene): still interactive. The dashboard stays pinned at
   the top of the screen while the questions scroll beneath it; the question at the reading line is marked and the dashboard moves
   to it (home-journey.js). The plain surface replaces the diagonal planes, which stretched behind the copy. */
html.hx-live .hj-visual.hj-flow .hj-stick{background:none}
html.hx-live .hj-visual.hj-flow .hj-vis-stage{position:sticky;top:12px;z-index:2;height:min(34svh,300px)}
@media (min-width:1001px){html.hx-live .hj-visual.hj-flow .hj-vis-stage{top:24px;height:min(calc(100svh - 48px),640px);align-self:start}}
html.hx-live .hj-visual.hj-flow .hj-vq{padding-left:16px;box-shadow:inset 2px 0 0 transparent;transition:box-shadow .4s}
html.hx-live .hj-visual.hj-flow .hj-vq.is-on{box-shadow:inset 2px 0 0 var(--hx-accent)}