/* Toolkit Town tour for kamran.uk. Additions only: styles.css is unchanged.
   Without the tour-on class (no script, reduced motion, no 3D support) the wrapper is invisible and the hero is exactly as before. */
@property --tour-copy{syntax:"<percentage>";inherits:true;initial-value:46%}
.tour-stage{display:contents}
.tour-canvas,.tour-scrim,.tour-ui{display:none}

html.tour-on .hero{--tour-seg:86vh;--tour-line:78px;display:block;position:relative;min-height:0;padding:0;height:calc(8*var(--tour-seg) + 100vh)}
html.tour-on .tour-stage{display:block;position:sticky;top:0;height:100vh;transition:--tour-copy .55s ease}
/* the stage is as tall as the screen ever gets, so the town reaches the bottom edge when a phone tucks its browser bar away; the rail is lifted by whatever is hidden (--tour-peek) */
@supports(height:100lvh){html.tour-on .hero{height:calc(8*var(--tour-seg) + 100lvh)}html.tour-on .tour-stage{height:100lvh}}
html.tour-on .hero-art{display:none}
html.tour-on .tour-ui{display:contents}

html.tour-on .tour-canvas{display:block;position:absolute;top:0;bottom:0;left:var(--tour-x,0px);width:var(--tour-w,100%);overflow:hidden}
html.tour-on .tour-canvas canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity 1.1s ease;outline:0;touch-action:pan-y}
html.tour-on .tour-canvas.is-ready canvas{opacity:1}
html.tour-on .tour-canvas.is-cut canvas{opacity:0;transition-duration:.16s}
html.tour-on .tour-canvas.is-clickable canvas{cursor:pointer}
/* until the town has loaded, the hero's own dashed orbits hold its place */
html.tour-on .tour-canvas:before,html.tour-on .tour-canvas:after{content:"";position:absolute;left:var(--tour-cx,72%);top:var(--tour-cy,50%);width:430px;height:430px;border:1px dashed var(--line);border-radius:50%;transform:translate(-50%,-50%);transition:opacity .9s ease}
html.tour-on .tour-canvas:after{width:300px;height:300px;border-style:solid;border-color:transparent;background:radial-gradient(circle,rgba(224,236,207,.16),transparent 68%)}
html.tour-on .tour-canvas.is-ready:before,html.tour-on .tour-canvas.is-ready:after{opacity:0}
html.tour-on .tour-scrim{display:block;position:absolute;top:0;bottom:0;left:var(--tour-x,0px);width:var(--tour-w,100%);pointer-events:none;background:linear-gradient(90deg,var(--bg) 0,var(--bg) calc(var(--tour-copy,46%)*.8),transparent calc(var(--tour-copy,46%)*1.3))}

html.tour-on .hero-copy,html.tour-on .tour-stop{position:absolute;left:0;top:calc(50% - var(--tour-peek,0px)/2 - var(--tour-line)/2);width:min(50%,620px);z-index:2;transform:translateY(-50%);transition:opacity .38s ease,transform .5s cubic-bezier(.2,.7,.2,1),visibility 0s linear 0s}
html.tour-on .tour-stop{opacity:0;visibility:hidden;transform:translateY(calc(-50% + 20px));transition-delay:0s,0s,.4s}
html.tour-on .tour-stop.is-active{opacity:1;visibility:visible;transform:translateY(-50%);transition-delay:.14s,.14s,0s}
html.tour-on .hero-copy.is-away{opacity:0;visibility:hidden;transform:translateY(calc(-50% - 20px));transition-delay:0s,0s,.4s}

.tour-stop[data-stop=money]{--cat:var(--money);--cat-ink:var(--money-ink)}
.tour-stop[data-stop=numbers]{--cat:var(--numbers);--cat-ink:var(--numbers-ink)}
.tour-stop[data-stop=text]{--cat:var(--text);--cat-ink:var(--text-ink)}
.tour-stop[data-stop=developer]{--cat:var(--developer);--cat-ink:var(--developer-ink)}
.tour-stop[data-stop=images]{--cat:var(--images);--cat-ink:var(--images-ink)}
.tour-stop[data-stop=productivity]{--cat:var(--productivity);--cat-ink:var(--productivity-ink)}
.tour-stop[data-stop=documents]{--cat:var(--documents);--cat-ink:var(--documents-ink)}
.tour-stop .eyebrow{gap:12px;margin-bottom:22px}
.tour-stop .eyebrow .tool-icon{width:38px;height:38px;border-radius:10px;background:var(--cat);color:var(--cat-ink)}
.tour-stop .eyebrow .tool-icon svg{width:19px;height:19px}
.tour-stop h2{font-size:clamp(40px,3.95vw,64px);letter-spacing:-.052em;line-height:1.03;font-weight:640}
.tour-stop h2 em{color:var(--accent);font-family:Georgia,"Times New Roman",serif;font-weight:400;letter-spacing:-.036em}
.tour-stop .title-dot{width:9px;height:9px}
.tour-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;max-width:520px}
.tour-chips .filter-chip{font-size:11px;padding:8px 12px;min-height:36px;border-radius:7px;color:var(--ink)}
.tour-chips .filter-chip svg{color:var(--cat-ink)}
.tour-chips .filter-chip:hover{border-color:var(--muted);transform:translateY(-1px)}

html.tour-on .tour-progress{position:absolute;left:0;right:0;bottom:calc(var(--tour-line) + var(--tour-peek,0px));height:1px;background:var(--line);z-index:3}
.tour-progress span{display:block;height:1px;width:100%;background:var(--accent);transform-origin:left center;transform:scaleX(var(--tour-p,0))}
html.tour-on .tour-rail{position:absolute;left:0;right:0;bottom:calc(24px + var(--tour-peek,0px));display:flex;align-items:center;gap:8px;z-index:3}
.tour-rail .filter-chip{min-height:34px}
.tour-rail .filter-chip:hover:not(.active){border-color:var(--muted)}
.tour-hint{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:9px;letter-spacing:1.8px;font-weight:670;color:var(--muted);transition:opacity .4s ease;white-space:nowrap}
.tour-hint svg{width:14px;height:14px;color:var(--accent);animation:tour-nudge 1.8s ease-in-out infinite}
.tour-hint.is-gone{opacity:0}
.tour-rail .tour-skip{margin-left:22px;white-space:nowrap}
.tour-tip{position:absolute;left:0;top:0;z-index:4;pointer-events:none;background:#29372b;color:#f4f9eb;border-radius:9px;padding:8px 12px;font-size:11px;font-weight:600;white-space:nowrap;box-shadow:var(--shadow);transform:translate(var(--tip-x,0px),var(--tip-y,0px)) translate(14px,18px)}
@keyframes tour-nudge{0%,100%{transform:translateY(-2px)}50%{transform:translateY(3px)}}

@media(max-width:1190px){.tour-stop h2{font-size:clamp(38px,4.6vw,54px)}
.tour-chips .filter-chip{font-size:10px;padding:7px 10px}
.tour-rail .tour-rail-label{display:none}
.tour-rail .filter-chip.active .tour-rail-label{display:inline}
}
/* narrow screens: words on top, the town underneath */
@media(max-width:900px){html.tour-on .hero{--tour-seg:76vh;--tour-line:64px}
html.tour-on .hero-copy,html.tour-on .tour-stop{top:30px;right:0;width:auto;transform:none}
html.tour-on .tour-stop{transform:translateY(16px)}
html.tour-on .tour-stop.is-active{transform:none}
html.tour-on .hero-copy.is-away{transform:translateY(-16px)}
html.tour-on .tour-scrim{background:linear-gradient(180deg,var(--bg) 0,var(--bg) calc(var(--tour-copy,46%)*.9),transparent calc(var(--tour-copy,46%)*1.14))}
html.tour-on .tour-canvas:before,html.tour-on .tour-canvas:after{left:50%;top:74%;width:300px;height:300px}
html.tour-on .tour-canvas:after{width:210px;height:210px}
.tour-stop h2{font-size:clamp(36px,9.8vw,50px)}
.tour-stop .eyebrow{margin-bottom:16px}
.tour-chips{margin-top:16px;gap:6px}
html.tour-on .tour-stop .hero-actions{margin-top:18px}
html.tour-on .tour-rail{bottom:calc(14px + var(--tour-peek,0px));gap:6px}
.tour-rail .filter-chip{padding:8px 9px;min-height:36px}
.tour-hint{display:none}
.tour-rail .tour-skip{margin-left:auto;font-size:11px}
}
@media(max-width:570px){.tour-chips .filter-chip:nth-child(n+4){display:none}
/* phones: the opening title takes three lines instead of four so the town can share the first screen */
html.tour-on .hero h1{font-size:clamp(40px,11.6vw,52px);letter-spacing:-.05em}
html.tour-on .hero h1 em{letter-spacing:-.034em}
html.tour-on .tour-rail{gap:5px}
.tour-rail .filter-chip{padding:7px;min-height:34px}
.tour-rail .filter-chip.active .tour-rail-label{display:none}
.tour-skip-more{display:none}
}
/* short screens (class set by tour-boot.js): the three small proof points make way for the town */
html.tour-on.tour-short .hero-proof{display:none}
/* the smallest phones: a little less air above and between the words, so the town still gets its strip */
html.tour-on.tour-tiny .hero-copy,html.tour-on.tour-tiny .tour-stop{top:16px}
html.tour-on.tour-tiny .hero-description{margin-top:14px}
html.tour-on.tour-tiny .hero-copy .hero-actions{margin-top:18px}