/* Bearing tour: silent, animated walkthrough. Reuses ../assets/site.css tokens,
   with the deck's gold accent replaced by Bearing's own magenta, so this
   tour reads as Bearing's, not a reskin of the others. */
:root{ --gold:#9B2F63; --gold-light:#D98FB3; }
body.tour-body{overflow:hidden; height:100vh}
.tour{position:fixed; inset:0; background:var(--navy); overflow:hidden}
.tour-top{position:absolute; top:0; left:0; right:0; z-index:5; padding:18px 22px 0}
.dots{display:flex; gap:5px}
.dots i{flex:1; height:3px; background:rgba(255,255,255,.22); border-radius:2px; overflow:hidden; position:relative}
.dots i b{position:absolute; inset:0; width:0; background:var(--gold-light); display:block; transform-origin:left}
.dots i.done b{width:100%; transition:none}
.dots i.active b{width:0; animation:fillbar linear forwards}
@keyframes fillbar{to{width:100%}}
.tour-brand{display:flex; justify-content:space-between; align-items:center; margin:12px 0 0}
.tour-brand span{font-family:'Bricolage Grotesque','Hanken Grotesk',system-ui,sans-serif; color:#fff; font-size:14.5px; opacity:.85}
.tour-controls{display:flex; gap:14px; align-items:center}
.tour-controls button{background:none; border:0; color:#fff; opacity:.75; cursor:pointer; font-size:13px; font-family:'Hanken Grotesk',sans-serif; padding:4px}
.tour-controls button:hover{opacity:1}
.skip{border-bottom:1px solid rgba(255,255,255,.5)}

.stage{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:90px 24px 70px}
.scene{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:90px 28px 70px; opacity:0; pointer-events:none; transition:opacity .5s ease; overflow-y:auto; -webkit-overflow-scrolling:touch}
.scene.on{opacity:1; pointer-events:auto}
.scene .inner{max-width:760px; width:100%; text-align:center}
.scene h2{font-family:'Bricolage Grotesque','Hanken Grotesk',system-ui,sans-serif; color:#fff; font-weight:600; font-size:clamp(26px,4.4vw,42px); line-height:1.3; margin:0 0 14px; letter-spacing:-.01em}
.scene .kick{text-transform:none; letter-spacing:.4px; font-size:13px; color:var(--gold-light); font-weight:600; margin:0 0 14px}
.scene p{color:rgba(228,236,232,.82); font-size:17px; line-height:1.65; max-width:60ch; margin:0 auto}
.pop{opacity:0; transform:translateY(14px); animation:pop .6s ease forwards}
.d1{animation-delay:.05s}.d2{animation-delay:.35s}.d3{animation-delay:.65s}.d4{animation-delay:.95s}
@keyframes pop{to{opacity:1; transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.pop{animation:none; opacity:1; transform:none}}

.sits{display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:30px; text-align:left}
.sits div{padding:0 18px; opacity:.35; transition:opacity .4s ease}
.sits div + div{border-left:1px solid rgba(255,255,255,.18)}
.sits div.on{opacity:1}
.sits h4{color:#fff; font-size:14.5px; margin:0 0 8px}
.sits p{color:rgba(228,236,232,.72); font-size:13.5px; margin:0; max-width:none}
@media (max-width:700px){.sits{grid-template-columns:1fr; gap:14px}.sits div + div{border-left:0; border-top:1px solid rgba(255,255,255,.18); padding-top:14px}}

.checklist{display:grid; grid-template-columns:1fr 1fr; gap:26px; margin-top:26px; text-align:left}
.checklist div{background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14); border-radius:8px; padding:16px 18px}
.checklist h4{color:var(--gold-light); font-size:12.5px; letter-spacing:.6px; margin:0 0 10px}
.checklist ul{list-style:none; margin:0; padding:0}
.checklist li{color:rgba(228,236,232,.85); font-size:14px; padding:5px 0; opacity:0; transform:translateX(-6px)}
.checklist li.on{animation:slide .4s ease forwards}
@keyframes slide{to{opacity:1; transform:none}}
@media (max-width:700px){.checklist{grid-template-columns:1fr}}

.chat{max-width:560px; margin:26px auto 0; text-align:left}
.bubble{max-width:82%; padding:11px 16px; border-radius:12px; font-size:14.5px; line-height:1.55; margin:0 0 10px; opacity:0; transform:translateY(8px)}
.bubble.on{animation:slide2 .45s ease forwards}
@keyframes slide2{to{opacity:1; transform:none}}
.b-ask{background:rgba(255,255,255,.08); color:#fff; border-bottom-left-radius:3px}
.b-ans{background:var(--gold-light); color:#3A2E10; margin-left:auto; border-bottom-right-radius:3px}
.b-why{background:none; border:1px dashed rgba(255,255,255,.35); color:rgba(228,236,232,.7); font-size:12.5px; font-style:italic}

.mapwrap{margin-top:24px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.14); border-radius:10px; padding:16px}
.mapwrap svg{width:100%; height:auto; display:block}

.deliv{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:26px; text-align:left}
.deliv div{opacity:0; transform:translateY(10px)}
.deliv div.on{animation:pop .5s ease forwards}
.deliv h4{color:#fff; font-size:14.5px; margin:0 0 6px}
.deliv p{color:rgba(228,236,232,.72); font-size:13px; margin:0}
@media (max-width:700px){.deliv{grid-template-columns:1fr}}

.end .inner{max-width:600px}
.end .btnrow{display:flex; gap:14px; justify-content:center; margin-top:30px; flex-wrap:wrap}
.tourbtn{font:inherit; font-size:14.5px; font-weight:600; padding:13px 26px; border-radius:6px; cursor:pointer; border:1px solid rgba(255,255,255,.5); background:transparent; color:#fff}
.tourbtn:hover{border-color:#fff}
.tourbtn.solid{background:var(--gold); border-color:var(--gold); color:#221904}
.tourbtn.solid:hover{background:var(--gold-light); border-color:var(--gold-light)}

.tour-bottom{position:absolute; bottom:22px; left:0; right:0; display:flex; justify-content:center; gap:26px; z-index:5}
.navbtn{background:none; border:0; color:rgba(255,255,255,.6); cursor:pointer; font-size:22px; padding:6px 14px; line-height:1}
.navbtn:hover{color:#fff}
.navbtn[disabled]{opacity:.25; cursor:default}

/* Modal for the assessment */
.modalbg{position:fixed; inset:0; background:rgba(15,42,71,.6); backdrop-filter:blur(2px); display:flex; align-items:center; justify-content:center; padding:22px; z-index:50; opacity:0; pointer-events:none; transition:opacity .25s ease}
.modalbg.on{opacity:1; pointer-events:auto}
.modalbox{background:var(--bg); width:100%; max-width:760px; height:min(88vh,880px); border-radius:12px; overflow:hidden; position:relative; box-shadow:0 30px 70px rgba(0,0,0,.4); transform:translateY(14px) scale(.98); transition:transform .25s ease}
.modalbg.on .modalbox{transform:none}
.modalbox iframe{width:100%; height:100%; border:0; display:block}
.modalclose{position:absolute; top:10px; right:10px; width:34px; height:34px; border-radius:50%; border:0; background:var(--paper); color:var(--navy); font-size:18px; cursor:pointer; z-index:2; box-shadow:0 2px 8px rgba(0,0,0,.15)}

/* Deck gravitas, Bearing's own version: an instrument face, concentric
   rings and radiating bearing-lines, not the shared flat grid. This is the
   same visual language as the compass on Bearing's own assessment screen,
   carried into the tour, not a decoration invented for its own sake. */
.tour::before{content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:repeating-radial-gradient(circle at 50% 42%, rgba(217,143,179,.05) 0px, rgba(217,143,179,.05) 1px, transparent 1px, transparent 68px),
    repeating-conic-gradient(from 0deg at 50% 42%, rgba(255,255,255,.028) 0deg 0.6deg, transparent 0.6deg 15deg);
  mask-image:radial-gradient(ellipse 82% 72% at 50% 42%, #000 35%, transparent 88%);
}
.tour::after{content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(ellipse 70% 55% at 50% 42%, rgba(155,47,99,.10), transparent 62%);
}
.stage{z-index:2}

.exline{position:absolute; top:96px; left:28px; right:28px; display:flex; justify-content:space-between; align-items:baseline; font-size:11px; letter-spacing:1.6px; text-transform:uppercase; color:rgba(255,176,58,.55); font-weight:700; pointer-events:none}
.exline[hidden]{display:none}
.exline span:last-child{color:rgba(228,236,232,.4)}
.decknote{position:absolute; bottom:64px; left:0; right:0; text-align:center; font-size:10.5px; letter-spacing:.8px; color:rgba(228,236,232,.32); text-transform:uppercase; pointer-events:none}
@media (max-width:700px){
  .exline{top:70px; font-size:9.5px; letter-spacing:1px}
  .decknote{bottom:58px; font-size:9px}
  .scene{padding-top:108px; align-items:flex-start}
  .scene.reportscene{padding-top:104px}
  .scene .inner{margin:auto 0}
  .tour-brand span:first-child{display:none}
  .tour-controls{gap:10px}
  .tour-controls button{font-size:12px; white-space:nowrap}
}

.rule{width:40px; height:2px; background:var(--gold); margin:0 auto 18px; border:0}
.rule.left{margin:0 0 16px}

/* Free vs report tags on the deliverables scene */
.tagpill{display:inline-block; font-size:10.5px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; padding:3px 9px; border-radius:3px; margin-bottom:8px}
.tp-free{background:rgba(184,146,63,.18); color:var(--gold-light); border:1px solid rgba(184,146,63,.4)}
.tp-report{background:rgba(255,255,255,.08); color:rgba(228,236,232,.75); border:1px solid rgba(255,255,255,.22)}

/* Report preview card */
.reportcard{position:relative; margin-top:16px; background:#fff; border-radius:10px; padding:16px 20px 14px; text-align:left; box-shadow:0 30px 60px rgba(0,0,0,.35); max-width:600px; margin-left:auto; margin-right:auto}
.reportcard::before,.reportcard::after{content:""; position:absolute; left:10px; right:-10px; height:100%; background:#EDEFF2; border-radius:10px; z-index:-1}
.reportcard::before{top:8px; right:-8px; background:#E4E7EC}
.reportcard::after{top:16px; right:-16px; background:#DADEE5}
.rc-top{display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); padding-bottom:8px; margin-bottom:12px}
.rc-top span:first-child{font-family:'Bricolage Grotesque','Hanken Grotesk',system-ui,sans-serif; font-weight:600; color:var(--navy); font-size:14.5px}
.rc-illustrative{font-size:10px; letter-spacing:.6px; text-transform:uppercase; color:var(--muted); border:1px solid var(--line); border-radius:3px; padding:2px 7px}
.rc-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px 20px}
.rc-h{font-size:11px; letter-spacing:.6px; text-transform:uppercase; color:var(--navy); font-weight:700; margin:0 0 6px; opacity:.8}
.rc-chart svg,.rc-donut svg{width:100%; height:auto; display:block}
.rc-chart p{margin:4px 0 0; font-size:11px; color:var(--muted); text-align:center}
.rc-legend{display:flex; flex-wrap:wrap; gap:6px 12px; justify-content:center; margin-top:2px}
.rc-legend span{font-size:10.5px; color:var(--ink); display:flex; align-items:center; gap:5px}
.rc-legend i{width:8px; height:8px; border-radius:2px; display:inline-block}
.rc-list .rc-row,.rc-evidence p{opacity:0; transform:translateY(4px)}
.rc-list .rc-row.on,.rc-evidence p.on{animation:pop .4s ease forwards}
.rc-row{display:flex; align-items:center; gap:8px; font-size:12px; color:var(--ink); padding:4px 0; border-bottom:1px solid var(--line)}
.rc-row .num{width:17px; height:17px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; color:#fff; flex:none}
.rc-evidence p{font-size:11.5px; color:var(--ink); font-style:italic; margin:0 0 6px; line-height:1.4}
.rc-evidence p span{display:block; font-style:normal; color:var(--muted); font-size:10.5px; margin-top:2px}
@media (max-width:700px){.rc-grid{grid-template-columns:1fr}.reportcard{padding:18px 18px 16px}}

/* Three-tier ladder */
.ladder{display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:30px; text-align:left; align-items:stretch}
.ladder > div{padding:20px; opacity:0; transform:translateY(10px); border:1px solid rgba(255,255,255,.14); border-left:0}
.ladder > div:first-child{border-left:1px solid rgba(255,255,255,.14); border-radius:6px 0 0 6px}
.ladder > div:last-child{border-radius:0 6px 6px 0; background:rgba(184,146,63,.06)}
.ladder > div.on{animation:pop .5s ease forwards}
.lstep{font-family:'Bricolage Grotesque','Hanken Grotesk',system-ui,sans-serif; color:var(--gold-light); font-size:22px}
.ladder h4{color:#fff; font-size:15px; margin:6px 0 8px}
.ladder p{color:rgba(228,236,232,.72); font-size:13px; margin:0 0 10px}
.lprice{display:inline-block; font-size:11px; font-weight:700; letter-spacing:.4px; color:var(--gold-light); border-top:1px solid rgba(255,255,255,.18); padding-top:8px; width:100%}
@media (max-width:700px){.ladder{grid-template-columns:1fr}.ladder>div,.ladder>div:first-child,.ladder>div:last-child{border-radius:0;border-left:1px solid rgba(255,255,255,.14)}}

.scene.reportscene{padding-top:78px; padding-bottom:52px}
.scene.reportscene h2{margin-bottom:6px}
.scene.reportscene p.pop{margin-bottom:0}

/* Six-step method overview */
.sixgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:26px; text-align:left; max-width:640px; margin-left:auto; margin-right:auto}
.sixgrid div{opacity:0; transform:translateY(8px); padding:14px 14px 12px; border:1px solid rgba(255,255,255,.14); border-radius:6px}
.sixgrid div.on{animation:pop .4s ease forwards}
.sixgrid .n{font-family:'Bricolage Grotesque','Hanken Grotesk',system-ui,sans-serif; color:var(--gold-light); font-size:18px; display:block; margin-bottom:5px}
.sixgrid h4{color:#fff; font-size:13px; margin:0; line-height:1.35}
@media (max-width:700px){.sixgrid{grid-template-columns:1fr 1fr; gap:10px}}

/* Amnesty quote */
.amnesty{max-width:600px; margin:26px auto 0; text-align:left; border-left:3px solid var(--gold); padding:4px 0 4px 22px}
.amnesty p{font-style:italic; color:rgba(228,236,232,.9); font-size:17px; line-height:1.6; margin:0 0 10px}
.amnesty .who{font-style:normal; font-size:12.5px; color:var(--gold-light); text-transform:uppercase; letter-spacing:.6px}

/* Four areas */
.areas{max-width:560px; margin:24px auto 0; text-align:left}
.areas > div{display:flex; gap:14px; padding:10px 0; border-bottom:1px solid rgba(255,255,255,.14); opacity:0; transform:translateX(-6px)}
.areas > div.on{animation:slide .4s ease forwards}
.areas .n{font-family:'Bricolage Grotesque','Hanken Grotesk',system-ui,sans-serif; color:var(--gold-light); font-size:18px; flex:none; width:26px}
.areas h4{color:#fff; font-size:14.5px; margin:0 0 2px}
.areas p{color:rgba(228,236,232,.68); font-size:12.5px; margin:0; max-width:none}

/* Scoring criteria */
.scoregrid{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:24px; text-align:left; max-width:660px; margin-left:auto; margin-right:auto}
.scoregrid div{opacity:0; transform:translateY(8px); background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14); border-radius:6px; padding:14px 16px}
.scoregrid div.on{animation:pop .4s ease forwards}
.scoregrid h4{color:var(--gold-light); font-size:11.5px; letter-spacing:.6px; text-transform:uppercase; margin:0 0 8px}
.scoregrid p{color:rgba(228,236,232,.78); font-size:12.5px; line-height:1.5; margin:0}
.scoregrid p b{color:#fff}

/* Timing strip */
.timeline{position:relative; max-width:680px; margin:38px auto 0; padding-top:6px}
.timeline .track{position:absolute; top:5px; left:0; right:0; height:2px; background:rgba(255,255,255,.2)}
.tl-row{display:flex; justify-content:space-between}
.tl-item{flex:1; text-align:center; opacity:0; transform:translateY(6px); padding:0 4px}
.tl-item.on{animation:pop .4s ease forwards}
.tl-dot{display:block; width:9px; height:9px; border-radius:50%; background:var(--gold); margin:0 auto 12px}
.tl-item .d{font-size:11px; color:var(--gold-light); font-weight:700; margin-bottom:4px}
.tl-item .w{font-size:12px; color:rgba(228,236,232,.75); line-height:1.4}
@media (max-width:700px){.tl-item .w{font-size:10.5px}}

/* Presenting principle */
.principle{max-width:600px; margin:22px auto 0; text-align:left}
.principle p{font-size:15px; line-height:1.7}

/* Condensed architecture strip: where this framework sits in the whole system. */
.archstrip{max-width:600px; margin:26px auto 0; text-align:left}
.archstrip .aband{border:1px solid rgba(255,255,255,.16); border-radius:6px; padding:14px 18px; margin-bottom:10px; opacity:0; transform:translateY(8px)}
.archstrip .aband.on{animation:pop .45s ease forwards}
.archstrip .aband .role{font-size:10.5px; letter-spacing:.8px; text-transform:uppercase; color:rgba(228,236,232,.5); font-weight:700; margin:0 0 3px}
.archstrip .aband h4{color:#fff; font-size:15px; margin:0 0 4px}
.archstrip .aband p{color:rgba(228,236,232,.65); font-size:12.5px; margin:0; max-width:none}
.archstrip .aband.here{border-color:var(--gold); background:rgba(184,146,63,.08)}
.archstrip .aband.here .role{color:var(--gold-light)}
.arch-more{display:block; text-align:center; margin-top:18px; font-size:12.5px; color:rgba(228,236,232,.55)}
.arch-more a{color:var(--gold-light); border-bottom:1px solid rgba(255,255,255,.3)}

/* The industry picker: Bearing's one interactive scene. */
.pickscene .picker{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:30px}
.picker button{font:inherit; text-align:left; background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.2); border-radius:8px; padding:20px 18px; color:#fff; cursor:pointer; transition:border-color .2s ease, background .2s ease}
.picker button:hover{border-color:rgba(255,255,255,.45)}
.picker button.picked{border-color:var(--gold); background:rgba(184,146,63,.14)}
.picker h4{margin:0 0 7px; font-size:15.5px; color:#fff; font-family:'Bricolage Grotesque','Hanken Grotesk',system-ui,sans-serif; font-weight:600}
.picker p{margin:0; font-size:13px; color:rgba(228,236,232,.68); max-width:none}
.picker button:focus-visible{outline:2px solid var(--gold-light); outline-offset:2px}
@media (max-width:700px){.pickscene .picker{grid-template-columns:1fr}}

/* The instrument: a real gauge with a needle, not a number sitting in a
   sentence. Reuses the compass language from Bearing's own assessment
   screen. The needle settles with a slight mechanical overshoot, not a
   bounce, this is meant to read as measured, not playful. */
.gauge{width:200px; height:200px; margin:0 auto}
.gauge[hidden]{display:none !important}
.gauge .ring{fill:none; stroke:rgba(255,255,255,.16); stroke-width:1.2}
.gauge .arc-track{fill:none; stroke:rgba(255,255,255,.12); stroke-width:3}
.gauge .arc-fill{fill:none; stroke:var(--gold-light); stroke-width:3; stroke-linecap:round;
  stroke-dasharray:402; stroke-dashoffset:402; transition:stroke-dashoffset 1.5s cubic-bezier(.16,1,.3,1)}
.gauge .tick{stroke:rgba(255,255,255,.28); stroke-width:1.4; stroke-linecap:round}
.gauge .needle{transform-origin:100px 100px; transition:transform 1.6s cubic-bezier(.2,1.4,.3,1)}
.gauge .needle-n{fill:var(--gold-light)}
.gauge .needle-s{fill:#fff; opacity:.2}
.gauge .hub{fill:#fff}
.gauge-readout{font-family:'Bricolage Grotesque','Hanken Grotesk',system-ui,sans-serif; font-weight:600; font-size:38px; color:#fff; text-align:center; margin-top:6px; font-variant-numeric:tabular-nums}
.gauge-caption{text-align:center; font-size:13px; color:rgba(255,255,255,.55); margin-top:2px}

/* An instrument-style readout for a currency figure: monospace-leaning,
   ticks and settles, deliberately less bouncy than Squall's count-up. */
.readout{font-family:'Bricolage Grotesque','Hanken Grotesk',system-ui,sans-serif; font-weight:600; font-size:clamp(52px,8vw,84px); color:#fff; text-align:center; letter-spacing:-.01em; font-variant-numeric:tabular-nums; margin:0}
.readout-caption{text-align:center; font-size:14px; color:rgba(255,255,255,.55); margin:4px 0 0}

/* a3 skin */
.tour h1,.tour h2,.tour h3,.scene h2,.scene h3{font-family:'Bricolage Grotesque','Hanken Grotesk',system-ui,sans-serif}
.tour,.scene p,.tour button{font-family:'Hanken Grotesk',system-ui,sans-serif}

:root{--navy:#0B1714;--navy2:#12211d;--steel:#aec2bb;--gold:#FFB03A;--gold-light:#FFC56B;--gold-text:#FFB03A;--ink:#E4ECE8}
.tour,.scene{background-color:#0B1714}