/* Layout: a work-first portfolio. A short intro, then the work fills the page as large framed screens, like a studio wall. */
:root{
  /* Brand: cream, teal, dark blue */
  --paper:#FAF6EE; --surface:#FFFFFF; --ink:#0E2240; --muted:#56627A; --line:#E6DFD1;
  --accent:#0E7C7F; --accent-ink:#FFFFFF; --live:#1F8A5B; --fill:#E4F2F1; --sky:#CFEAE8; --glow:#B9E0DD; --rose:#1B3F6B; --blush:#F2EADB; --lilac:#E2F0EE;
  --display:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;
  --body:"Hanken Grotesk","Helvetica Neue",Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
}
:root,:root[data-theme="dark"]{color-scheme:light}

*{box-sizing:border-box}
body{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6;padding-inline:20px;-webkit-font-smoothing:antialiased}
.wrap{max-width:1180px;margin-inline:auto}
h1,h2,h3{font-family:var(--display);line-height:1.05;text-wrap:balance;margin:0;letter-spacing:-.02em}
p{margin:0;max-width:62ch}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.mono{font-family:var(--mono);font-size:12.5px;letter-spacing:.04em}
.fill{background:var(--fill);border:1px dashed var(--rose);border-radius:6px;padding:0 .35em;font-size:.92em;white-space:nowrap}
.muted{color:var(--muted)}

nav.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(8px);margin-inline:-20px;padding:14px 20px;border-bottom:1px solid var(--line)}
nav.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{font-family:var(--display);font-weight:800;font-size:18px;text-decoration:none}
.links{display:flex;gap:22px;align-items:center;font-size:15px}
.links a{text-decoration:none;color:var(--muted)}
.links a:hover{color:var(--ink)}
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px;padding:12px 20px;border-radius:9px;text-decoration:none;border:1px solid var(--accent);background:var(--accent);color:var(--accent-ink)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn:hover{filter:brightness(1.08)}
.links .btn{padding:9px 16px;color:var(--accent-ink)}
@media (max-width:700px){.links a:not(.btn){display:none}}

section{padding-block:clamp(56px,8vw,104px)}
.label{--rule:1;border-image:linear-gradient(90deg,var(--accent) calc(var(--rule)*100%),transparent 0) 1 0 0 0;display:flex;justify-content:space-between;align-items:baseline;gap:16px;border-top:1px solid var(--ink);padding-top:14px;margin-bottom:32px;flex-wrap:wrap}
.label h2{font-size:clamp(26px,3.2vw,36px)}

/* intro */
.intro{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(20px,3vw,40px);align-items:center;padding-block:clamp(56px,9vw,120px) clamp(40px,6vw,72px)}
.intro > *{min-width:0}
.intro h1{font-size:clamp(32px,3.7vw,52px);font-weight:800}
.title{font-family:var(--display);font-size:clamp(20px,2.4vw,28px);font-weight:600;color:var(--rose);margin-top:14px}
.skills{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.skills span{font-family:var(--mono);font-size:12.5px;border:1px solid var(--line);border-radius:7px;padding:4px 10px;background:var(--surface)}
.intro .lede{font-size:clamp(18px,1.9vw,21px);margin-top:26px}
.intro .row{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.portrait{aspect-ratio:4/5;max-width:100%;border-radius:14px;background:linear-gradient(160deg,var(--blush),var(--sky));border:1px dashed var(--rose);display:grid;place-items:center;text-align:center;color:var(--rose);font-family:var(--display);font-weight:800;font-size:64px;line-height:1}
.portrait small{display:block;font-family:var(--mono);font-weight:400;font-size:12px;margin-top:10px}
@media (max-width:820px){.intro{grid-template-columns:1fr}.portrait{max-width:300px}}

/* screens */
.screen{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface)}
.chrome{display:flex;align-items:center;gap:6px;padding:9px 12px;border-bottom:1px solid var(--line)}
.chrome i{width:9px;height:9px;border-radius:50%;background:var(--line)}
.chrome span{margin-left:8px;font-family:var(--mono);font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shot{aspect-ratio:16/10;max-width:100%;display:grid;place-items:center;text-align:center;padding:16px;background:color-mix(in srgb,var(--hue,var(--accent)) 12%,var(--surface));position:relative}
.shot b{font-family:var(--display);font-size:clamp(22px,2.6vw,34px);font-weight:800;color:color-mix(in srgb,var(--hue,var(--accent)) 75%,var(--ink));display:block}
.shot .mono{color:var(--muted);display:block;margin-top:6px}

/* flagship */
.flag{display:grid;grid-template-columns:1.6fr 1fr;gap:clamp(24px,4vw,48px);align-items:center}
.flag > *{min-width:0}
.flag .shot{aspect-ratio:16/9}
.play{display:block;margin:0 auto 12px;width:58px;height:58px;border-radius:50%;background:var(--accent);position:relative}
.play::after{content:"";position:absolute;left:23px;top:18px;border-left:16px solid var(--accent-ink);border-top:11px solid transparent;border-bottom:11px solid transparent}
.flag h3{font-size:clamp(28px,3.4vw,42px)}
.flag .stack{display:flex;flex-direction:column;gap:16px}
.facts{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
.facts div{padding:12px 0;border-bottom:1px solid var(--line)}
.facts strong{display:block;font-family:var(--display);font-size:26px;font-weight:600;font-variant-numeric:tabular-nums}
.facts span{font-size:13.5px;color:var(--muted)}
.more{font-weight:600;color:var(--accent);text-decoration:none}
@media (max-width:860px){.flag{grid-template-columns:1fr}}

/* stores grid */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px 22px}
.grid > *{min-width:0}
.tile{display:flex;flex-direction:column;gap:12px;text-decoration:none}
.tile .meta{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.tile h3{font-size:20px}
.tile .meta .mono{color:var(--muted);white-space:nowrap}
.tile:hover .screen{border-color:var(--accent)}
.tile.wide{grid-column:span 2}
@media (max-width:900px){.grid{grid-template-columns:1fr 1fr}.tile.wide{grid-column:span 2}}
@media (max-width:560px){.grid{grid-template-columns:1fr}.tile.wide{grid-column:auto}}

/* how */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.steps > div{border-top:2px solid var(--accent);padding-top:14px}
.steps .mono{color:var(--accent)}
.steps h3{font-size:22px;margin:6px 0 8px}
.steps p{color:var(--muted);font-size:15.5px}
@media (max-width:860px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.steps{grid-template-columns:1fr}}

/* testimonial */
.quote{display:grid;grid-template-columns:1fr 1.4fr;gap:clamp(24px,4vw,56px);align-items:center}
.quote > *{min-width:0}
.quote .shot{aspect-ratio:4/3}
.quote blockquote{margin:0;font-family:var(--display);font-size:clamp(26px,3.4vw,42px);font-weight:600;line-height:1.2;letter-spacing:-.01em}
.quote cite{display:block;font-style:normal;margin-top:16px;color:var(--muted)}
.quote cite b{color:var(--ink)}
@media (max-width:820px){.quote{grid-template-columns:1fr}}

.logos{display:flex;flex-wrap:wrap;gap:10px 28px;color:var(--muted);font-family:var(--display);font-weight:600;font-size:17px;margin-top:40px}
.logos .mono{align-self:center;font-weight:400}

/* about + cta */
.about{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px)}
.about > *{min-width:0}
.about p + p{margin-top:14px}
@media (max-width:820px){.about{grid-template-columns:1fr}}
.cta{background:linear-gradient(135deg,#FFFFFF 0%,var(--sky) 55%,var(--blush) 100%);color:var(--ink);border:1px solid var(--line);border-radius:18px;padding:clamp(32px,6vw,72px);display:flex;flex-direction:column;gap:18px}
.cta h2{font-size:clamp(34px,5vw,60px);max-width:16ch}
.cta p{color:var(--muted)}
.cta .btn{align-self:flex-start}
.big{font-family:var(--display);font-size:clamp(24px,3vw,36px);font-weight:600;line-height:1.2;letter-spacing:-.01em;max-width:24ch}
.letter-body{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(24px,4vw,56px)}
.letter-body > *{min-width:0}
.letter-body p + p{margin-top:14px}
@media (max-width:820px){.letter-body{grid-template-columns:1fr}}
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.tiers > *{min-width:0}
.tier{border:1px solid var(--line);border-radius:14px;padding:24px;display:flex;flex-direction:column;gap:10px;background:var(--surface)}
.tier.first{border-color:var(--rose);box-shadow:0 0 0 1px var(--rose)}
.tier h3{font-size:24px}
.tier .tag{font-family:var(--mono);font-size:11.5px;color:var(--accent);text-transform:uppercase;letter-spacing:.08em}
.tier p{color:var(--muted);font-size:15.5px}
@media (max-width:860px){.tiers{grid-template-columns:1fr}}
.fit{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:36px}
.fit > div{border-top:2px solid var(--live);padding-top:14px}
.fit > div.no{border-color:var(--muted)}
.fit h3{font-size:20px;margin-bottom:6px}
@media (max-width:700px){.fit{grid-template-columns:1fr}}
.cta .ps{font-size:15px;max-width:60ch;color:var(--muted);border-top:1px solid var(--line);padding-top:16px;margin-top:6px}
.meet{display:grid;grid-template-columns:.8fr 1.4fr;gap:clamp(24px,4vw,56px);align-items:start}
.meet > *{min-width:0}
.meet-text{display:flex;flex-direction:column;gap:14px}
.portrait.tall{aspect-ratio:3/4}
.path{display:grid;grid-template-columns:repeat(5,1fr);padding:0;margin:18px 0 0;border-top:2px solid var(--line)}
.path li{list-style:none;padding:16px 12px 0 0;position:relative;font-size:14.5px}
.path li::before{content:"";position:absolute;top:-7px;left:0;width:12px;height:12px;border-radius:50%;background:var(--paper);border:2px solid var(--muted)}
.path li.now::before{background:var(--accent);border-color:var(--accent)}
.path li .mono{display:block;color:var(--muted);margin-bottom:2px}
@media (max-width:820px){.meet{grid-template-columns:1fr}.portrait.tall{max-width:300px}}
@media (max-width:600px){.path{grid-template-columns:1fr;border-top:0;border-left:2px solid var(--line);padding-left:18px}.path li{padding:0 0 18px}.path li::before{left:-26px;top:4px}}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.pillars > *{min-width:0}
.pillar{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:26px;display:flex;flex-direction:column;gap:10px}
.pillar .mono{color:var(--rose)}
.pillar h3{font-size:22px}
.pillar ul{margin:6px 0 0;padding:0;list-style:none;display:flex;flex-direction:column}
.pillar li{padding:9px 0;border-top:1px solid var(--line);font-size:15.5px}
@media (max-width:900px){.pillars{grid-template-columns:1fr}}
.recog{display:grid;grid-template-columns:repeat(4,1fr);margin-top:28px;border-top:1px solid var(--ink)}
.recog div{padding:14px 14px 0 0}
.recog strong{display:block;font-family:var(--display);font-size:19px;font-weight:600}
.recog span{color:var(--muted);font-size:13.5px}
@media (max-width:820px){.recog{grid-template-columns:1fr 1fr}.recog div{padding-bottom:14px}}
.tools{color:var(--muted);margin-top:22px;line-height:1.8}
.hero-photo{position:relative;max-width:100%;padding:24px 0}
.hero-photo .portrait{max-width:340px;margin-inline:auto}
.chip{position:absolute;background:#FFFFFF;color:var(--ink);font-size:12.5px;font-weight:600;padding:6px 11px;border-radius:7px;white-space:nowrap;box-shadow:0 8px 20px -10px rgba(0,0,0,.4)}
.c1{left:0;top:16%}.c2{right:0;top:12%}.c3{left:-4%;top:42%}.c4{right:-2%;top:40%}.c5{left:4%;top:70%}.c6{right:6%;top:72%}
@media (max-width:820px){.hero-photo{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}.hero-photo .portrait{flex-basis:100%}.chip{position:static}}
.logos.center{justify-content:center;margin-top:0}
.statbar{display:grid;grid-template-columns:repeat(4,1fr);margin-top:40px;background:linear-gradient(135deg,#FFFFFF 0%,var(--sky) 55%,var(--blush) 100%);color:var(--ink);border:1px solid var(--line);border-radius:14px;padding:22px 24px;gap:18px}
.statbar strong{display:block;font-family:var(--display);font-size:clamp(22px,2.6vw,32px);font-weight:600}
.statbar span{font-size:13.5px;color:var(--muted)}
@media (max-width:820px){.statbar{grid-template-columns:1fr 1fr}}
.cards9{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.cards9 > div{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:22px;display:flex;flex-direction:column;gap:8px;min-width:0}
.cards9 .mono{color:var(--rose);text-transform:uppercase;font-size:11.5px;letter-spacing:.08em}
.cards9 h3{font-size:20px}
.cards9 p{color:var(--muted);font-size:15px}
@media (max-width:900px){.cards9{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.cards9{grid-template-columns:1fr}}
.toolwall{display:flex;flex-wrap:wrap;gap:10px}
.toolwall span{border:1px solid var(--line);background:var(--surface);border-radius:7px;padding:7px 13px;font-size:14.5px;font-weight:500}
.why{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.why > div{background:linear-gradient(135deg,#FFFFFF 0%,var(--sky) 55%,var(--blush) 100%);color:var(--ink);border:1px solid var(--line);border-radius:14px;padding:26px;display:flex;flex-direction:column;gap:10px;min-width:0}
.why h3{font-size:22px}
.why p{color:var(--muted);font-size:15.5px}
@media (max-width:860px){.why{grid-template-columns:1fr}}
.rv-feature{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(24px,4vw,48px);align-items:center;margin-bottom:22px}
.rv-feature > *{min-width:0}
.rv-feature .shot{aspect-ratio:16/10}
.rv{margin:0;display:flex;flex-direction:column;gap:14px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:22px}
.rv blockquote{margin:0;font-family:var(--display);font-size:20px;font-weight:600;line-height:1.3}
.rv figcaption{display:flex;flex-direction:column;gap:2px;font-size:14.5px}
.rv figcaption span{color:var(--muted)}
.rv figcaption a{color:var(--accent);text-decoration:none;margin-top:8px}
.big-rv{background:transparent;border:0;padding:0}
.big-rv blockquote{font-size:clamp(26px,3.4vw,40px);line-height:1.2}
.rv-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.rv-grid > *{min-width:0}
@media (max-width:1000px){.rv-grid{grid-template-columns:1fr 1fr}}
@media (max-width:820px){.rv-feature{grid-template-columns:1fr}}
@media (max-width:560px){.rv-grid{grid-template-columns:1fr}}

/* ---------- 3D scroll layer ---------- */
body{background:
  radial-gradient(60vw 50vw at 85% -10%, color-mix(in srgb,var(--sky) 85%,transparent), transparent 70%),
  radial-gradient(45vw 40vw at -10% 25%, color-mix(in srgb,var(--blush) 90%,transparent), transparent 70%),
  radial-gradient(50vw 45vw at 60% 70%, color-mix(in srgb,var(--lilac) 55%,transparent), transparent 70%),
  var(--paper);background-attachment:fixed}
.sky-orb{position:fixed;border-radius:50%;filter:blur(60px);z-index:-1;pointer-events:none;background:var(--glow);opacity:.35}
.o1{width:38vw;height:38vw;right:-10vw;top:20vh}.o2{width:30vw;height:30vw;left:-8vw;top:70vh;background:var(--lilac);opacity:.6}
.intro h1 .w{display:inline-block}
.stage{perspective:1400px}
.stage > *{transform-style:preserve-3d;will-change:transform}
.hero-photo{perspective:900px}
.hero-photo .orbit{transform-style:preserve-3d;position:relative}
.hero-photo .portrait{transform:translateZ(0);box-shadow:0 40px 80px -40px color-mix(in srgb,var(--ink) 60%,transparent)}
.chip{transform-style:preserve-3d;background:#FFFFFF;color:var(--ink);border:1px solid var(--line)}
.chip.c2,.chip.c6{background:var(--blush);color:var(--ink);border:1px solid color-mix(in srgb,var(--rose) 40%,transparent)}
.tilt{transform-style:preserve-3d;transition:transform .25s ease-out}
.tilt:hover{box-shadow:0 30px 60px -30px color-mix(in srgb,var(--rose) 35%,transparent)}
.flag .screen{transform-origin:50% 100%}
.toolwall{flex-wrap:nowrap;width:max-content;gap:12px}
.toolrail{overflow:hidden;margin-inline:-20px;padding:10px 20px;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.toolrail + .toolrail{margin-top:4px}

/* progress: a 3D cube + rail */
.pg{position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:15;display:flex;flex-direction:column;align-items:center;gap:14px}
.cube-wrap{width:46px;height:46px;perspective:400px}
.cube{width:46px;height:46px;position:relative;transform-style:preserve-3d;transform:rotateX(-20deg) rotateY(30deg)}
.cube i{position:absolute;inset:0;border:1.5px solid var(--rose);background:linear-gradient(135deg,color-mix(in srgb,var(--sky) 60%,transparent),color-mix(in srgb,var(--blush) 75%,transparent));display:grid;place-items:center;font-family:var(--mono);font-style:normal;font-size:12px;font-weight:500;color:var(--ink);backdrop-filter:blur(2px)}
.cube i:nth-child(1){transform:translateZ(23px)}.cube i:nth-child(2){transform:rotateY(180deg) translateZ(23px)}
.cube i:nth-child(3){transform:rotateY(90deg) translateZ(23px)}.cube i:nth-child(4){transform:rotateY(-90deg) translateZ(23px)}
.cube i:nth-child(5){transform:rotateX(90deg) translateZ(23px)}.cube i:nth-child(6){transform:rotateX(-90deg) translateZ(23px)}
.rail{position:relative;width:2px;height:min(46vh,380px);background:var(--line);border-radius:2px}
.rail b{position:absolute;left:0;top:0;width:2px;height:100%;background:linear-gradient(var(--accent),var(--rose));transform-origin:50% 0;transform:scaleY(0);border-radius:2px}
.rail a{position:absolute;left:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--paper);border:2px solid var(--line);transition:transform .2s,border-color .2s}
.rail a.done{border-color:var(--rose);background:var(--rose)}
.rail a.cur{transform:scale(1.6)}
.rail a span{position:absolute;right:18px;top:50%;transform:translateY(-50%);white-space:nowrap;font-family:var(--mono);font-size:11.5px;color:var(--muted);opacity:0;pointer-events:none;transition:opacity .2s}
.rail a:hover span{opacity:1}
.pg .now{font-family:var(--mono);font-size:11px;color:var(--rose);writing-mode:vertical-rl;letter-spacing:.12em;text-transform:uppercase}
@media (max-width:900px){.pg{right:auto;left:0;top:auto;bottom:calc(env(safe-area-inset-bottom,0px) + 14px);transform:none;width:100%;flex-direction:row;justify-content:center;pointer-events:none}.rail,.pg .now{display:none}.cube-wrap{pointer-events:auto}}
@media (prefers-reduced-motion: reduce){.tilt{transition:none}}
.story-hero{display:grid;grid-template-columns:1.4fr .8fr;gap:clamp(28px,5vw,64px);align-items:center;padding-block:28px 40px}
.story-hero > *{min-width:0}
.story-hero h1{font-size:clamp(32px,4.6vw,56px);font-weight:800}
@media (max-width:820px){.story-hero{grid-template-columns:1fr}.story-hero .portrait{max-width:300px}}
.jobs{margin:0;padding:0;list-style:none}
.jobs li{display:grid;grid-template-columns:150px 1fr;gap:6px 24px;padding:18px 0;border-top:1px solid var(--line)}
.jobs li:first-child{border-top:0;padding-top:0}
.jobs li > *{min-width:0}
.jobs h3{font-size:20px}
@media (max-width:600px){.jobs li{grid-template-columns:1fr}}
.edu{display:grid;grid-template-columns:1fr;gap:32px;align-items:start}
.edu > *{min-width:0}
@media (max-width:760px){.edu{grid-template-columns:1fr}.edu .portrait{max-width:240px}}
.grad{background:linear-gradient(90deg,var(--accent),var(--rose));-webkit-background-clip:text;background-clip:text;color:transparent}

/* cover image behind the hero */
body{overflow-x:clip}
.intro{position:relative;isolation:isolate}
.intro::before{content:"";position:absolute;z-index:-1;top:-90px;bottom:-40px;left:calc(50% - 50vw);right:calc(50% - 50vw);background:url(/img/hero-cover.jpg) 70% center/cover no-repeat;-webkit-mask-image:linear-gradient(#000 75%,transparent);mask-image:linear-gradient(#000 75%,transparent);filter:saturate(.35) sepia(.12)}
@media (max-width:820px){.intro::before{background-position:80% top;opacity:.75}}
.me{display:block;width:100%;max-width:360px;height:auto;margin-inline:auto;filter:drop-shadow(0 30px 40px color-mix(in srgb,var(--ink) 25%,transparent));opacity:0;transition:opacity .5s}
.me.ready{opacity:1}
.me-copy{max-width:320px}
/* hero tags: two tidy columns either side of the photo, like the original site */
.hero-photo .chip{position:absolute;display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:#fff;border:0;font-size:12.5px;font-weight:600;padding:5px 12px 5px 5px;border-radius:7px;white-space:nowrap;box-shadow:0 10px 24px -12px color-mix(in srgb,var(--ink) 60%,transparent)}
.chip .ico{width:22px;height:22px;border-radius:50%;background:#fff;display:grid;place-items:center;flex:none}
.chip .ico svg{width:13px;height:13px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.chip.l1,.chip.r1{top:30%}.chip.l2,.chip.r2{top:43%}.chip.l3,.chip.r3{top:56%}.chip.l4,.chip.r4{top:69%}
.chip.l1,.chip.l4{right:calc(50% + 136px)}.chip.l2,.chip.l3{right:calc(50% + 146px)}
.chip.r1,.chip.r4{left:calc(50% + 140px)}.chip.r2,.chip.r3{left:calc(50% + 150px)}
.hero-photo .chip.c2,.hero-photo .chip.c6{background:var(--ink);color:#fff;border:0}
@media (max-width:820px){.hero-photo .chip{position:static}}
/* Strategy meets execution: three lanes, one label each */
.lanes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.lane{min-width:0;border-radius:18px;padding:22px;display:flex;flex-direction:column;gap:16px;border:1px solid var(--line)}
.lane.sky{background:linear-gradient(180deg,color-mix(in srgb,var(--sky) 70%,#fff),#fff 70%)}
.lane.blush{background:linear-gradient(180deg,var(--blush),#fff 70%)}
.lane.lilac{background:linear-gradient(180deg,var(--lilac),#fff 70%)}
.lane header{display:flex;gap:14px;align-items:flex-start;padding-bottom:16px;border-bottom:1px solid var(--line)}
.lane-ico{width:44px;height:44px;border-radius:12px;background:#fff;display:grid;place-items:center;flex:none;box-shadow:0 8px 20px -12px color-mix(in srgb,var(--ink) 40%,transparent)}
.lane-ico svg{width:22px;height:22px;fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lane.blush .lane-ico svg{stroke:var(--rose)}
.lane header .mono{color:var(--muted);font-size:11.5px}
.lane header h3{font-size:24px;margin:2px 0 4px}
.lane header p{color:var(--muted);font-size:14.5px}
.lane ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.lane li{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 16px 16px 18px;position:relative}
.lane li::before{content:"";position:absolute;left:0;top:16px;bottom:16px;width:3px;border-radius:0 3px 3px 0;background:var(--accent)}
.lane.blush li::before{background:var(--rose)}
.lane.lilac li::before{background:color-mix(in srgb,var(--accent) 50%,var(--rose))}
.lane h4{margin:0 0 4px;font-family:var(--display);font-size:18px;letter-spacing:-.01em}
.lane li p{color:var(--muted);font-size:14.5px}
@media (max-width:900px){.lanes{grid-template-columns:1fr}}
/* partner logo strip: one continuous white band */
.logo-strip{display:flex;overflow:hidden;margin-inline:calc(50% - 50vw);padding-block:26px;background:#fff;border-block:1px solid var(--line);box-shadow:0 20px 40px -34px color-mix(in srgb,var(--ink) 40%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.logo-track{display:flex;align-items:center;gap:0;padding:0;margin:0;list-style:none;flex:none;animation:logos 80s linear infinite}
.logo-strip:hover .logo-track{animation-play-state:paused}
.logo-track li{height:64px;padding-inline:34px;display:flex;align-items:center;justify-content:center;flex:none;position:relative}
.logo-track li + li::before{content:'';position:absolute;left:0;top:50%;width:4px;height:4px;margin-top:-2px;border-radius:50%;background:color-mix(in srgb,var(--rose) 45%,var(--line))}
.logo-track img{display:block;height:auto;width:auto;max-height:58px;max-width:150px;object-fit:contain;transition:transform .25s}
.logo-track li:hover img{transform:scale(1.08)}
@keyframes logos{to{transform:translateX(-100%)}}
.also{text-align:center;margin:18px auto 0;line-height:1.8}
@media (prefers-reduced-motion: reduce){.logo-track{animation:none;flex-wrap:wrap;justify-content:center}.logo-track[aria-hidden]{display:none}.logo-strip{mask-image:none;-webkit-mask-image:none}}
.certs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.certs > *{min-width:0}
.cert{all:unset;cursor:pointer;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:transform .25s,box-shadow .25s}
.cert:hover,.cert:focus-visible{transform:translateY(-4px) rotate(-.5deg);box-shadow:0 24px 40px -24px color-mix(in srgb,var(--rose) 50%,transparent)}
.cert:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cert img{display:block;width:100%;aspect-ratio:1.42;object-fit:cover;border-bottom:1px solid var(--line)}
.cert-cap{display:flex;flex-direction:column;gap:2px;padding:12px 14px;font-size:13.5px}
.cert-cap b{font-family:var(--display);font-size:16px;color:var(--ink)}
.cert-cap span{color:var(--muted)}
.cert-cap .mono{color:var(--rose);font-size:11.5px;margin-top:4px}
@media (max-width:900px){.certs{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.certs{grid-template-columns:1fr}}
.cert-view{border:0;padding:0;border-radius:14px;max-width:min(1000px,94vw);background:#fff;box-shadow:0 40px 80px -30px rgba(10,15,61,.5)}
.cert-view::backdrop{background:color-mix(in srgb,var(--paper) 70%,transparent);backdrop-filter:blur(6px)}
.cert-view img{display:block;width:100%;height:auto}
.cert-close{position:absolute;top:8px;right:10px;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:#fff;font-size:22px;line-height:1;cursor:pointer;color:var(--ink)}
/* pose photos */
.pose{display:block;height:auto;max-width:100%;filter:drop-shadow(0 24px 30px color-mix(in srgb,var(--ink) 18%,transparent))}
.letter-body.with-pose{grid-template-columns:.9fr 1fr 1.1fr;align-items:end}
.pose-think{width:100%;max-width:360px;margin:-60px auto -48px;order:-1}
.letter-body.with-pose > p.big{align-self:center}
.pose-meet{width:100%;max-width:340px;margin-inline:auto}
.offer-intro{display:grid;grid-template-columns:1fr minmax(260px,400px);gap:clamp(16px,3vw,40px);align-items:center;margin-bottom:8px}
.offer-copy{justify-self:end;width:100%;max-width:580px;display:flex;flex-direction:column;gap:16px;padding-bottom:clamp(40px,8vw,120px)}
.offer-copy p.big{margin:0;text-align:left;max-width:none}
.offer-sub{font-size:17px;max-width:44ch}
.offer-cue{display:inline-flex;align-items:center;gap:8px;color:var(--accent);font-size:12.5px;text-transform:uppercase;letter-spacing:.08em}
.offer-cue svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;animation:cue 1.6s ease-in-out infinite}
@keyframes cue{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
.pose-present{width:400px;max-width:100%;margin-top:-40px}
.cta-pose{position:relative;padding-right:min(44%,480px);overflow:visible}
.pose-phone{position:absolute;right:clamp(0px,3vw,40px);bottom:0;width:min(42%,470px)}
.pose-about{width:100%;max-width:340px;margin-inline:auto}
@media (max-width:900px){.offer-copy{justify-self:start;padding-bottom:0}.letter-body.with-pose{grid-template-columns:1fr}.pose-think{margin:0 auto;max-width:240px}.offer-intro{grid-template-columns:1fr}.pose-present{width:260px;margin:0 auto}.cta-pose{padding-right:clamp(32px,6vw,72px)}.pose-phone{position:static;width:280px;margin:0 auto -1px}}
.toolrow{display:grid;grid-template-columns:190px 1fr;gap:16px;align-items:center}
.toolrow + .toolrow{margin-top:6px}
.toolrow > *{min-width:0}
.toolcat{color:var(--rose);font-size:11.5px;text-transform:uppercase;letter-spacing:.08em}
.toolrow .toolrail{margin-inline:0}
@media (max-width:700px){.toolrow{grid-template-columns:1fr;gap:4px}}
/* Meet Hazzel timeline fills as you scroll */
.path{position:relative}
.path::after{content:"";position:absolute;left:0;top:-2px;height:2px;width:100%;background:linear-gradient(90deg,var(--accent),var(--rose));transform-origin:0 50%;transform:scaleX(var(--pf,1))}
.path li::before{transition:background .3s,border-color .3s,transform .3s}
.path li.lit::before{background:var(--rose);border-color:var(--rose);transform:scale(1.25)}
.path li.now.lit::before{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 6px color-mix(in srgb,var(--accent) 20%,transparent)}
.path li{transition:opacity .3s}
@media (max-width:600px){.path::after{top:0;left:-2px;width:2px;height:100%;transform-origin:50% 0;transform:scaleY(var(--pf,1))}}
/* Meet Hazzel: the climb */
.climb{position:relative;display:flex;align-items:flex-end;gap:10px;height:300px;margin-top:22px;padding-top:18px}
.climb .step{flex:1;min-width:0;height:var(--h);display:flex;position:relative;z-index:1}
.step-card{flex:1;display:flex;flex-direction:column;gap:3px;padding:12px 12px 14px;border-radius:12px 12px 4px 4px;background:linear-gradient(180deg,#fff,color-mix(in srgb,var(--sky) 45%,#fff));border:1px solid var(--line);font-size:13px;line-height:1.35;transform:translateY(10px);opacity:.55;transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .45s,box-shadow .45s,border-color .45s}
.step-card b{font-family:var(--display);font-size:15px;color:var(--ink)}
.step-card span:not(.step-year){color:var(--muted)}
.step-year{color:var(--rose);font-size:11.5px}
.step.lit .step-card{transform:translateY(0);opacity:1;border-color:color-mix(in srgb,var(--rose) 45%,var(--line));box-shadow:0 18px 30px -20px color-mix(in srgb,var(--rose) 60%,transparent)}
.step.now .step-card{background:linear-gradient(180deg,#fff,var(--blush))}
.step.now.lit .step-card{box-shadow:0 0 0 4px color-mix(in srgb,var(--rose) 18%,transparent),0 24px 40px -20px color-mix(in srgb,var(--rose) 70%,transparent)}
.now-tag{position:absolute;top:-12px;right:10px;font-style:normal;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;background:var(--rose);color:#fff;padding:3px 8px;border-radius:7px}
.climb-line{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:2}
.climb-track{fill:none;stroke:var(--line);stroke-width:2;stroke-dasharray:4 6}
.climb-draw{fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.climb-dot{fill:#fff;stroke:var(--rose);stroke-width:3;filter:drop-shadow(0 0 6px color-mix(in srgb,var(--rose) 70%,transparent))}
@media (max-width:700px){.climb{flex-direction:column;align-items:stretch;height:auto;gap:8px}.climb .step{height:auto;margin-left:calc(var(--h) - 38%)}.climb-line{display:none}.step-card{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.step-card{opacity:1;transform:none}}
.climb-wrap{margin-top:48px}
.climb-wrap .climb{height:340px;gap:16px}
.step-card{padding:16px 16px 18px;font-size:14px}
.step-card b{font-size:17px}
.climb-more{display:inline-block;margin-top:18px}
.meet{align-items:center}
footer{padding-block:32px 56px;color:var(--muted);font-size:14px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

.crumb{display:flex;gap:10px;align-items:center;padding-block:28px 0;font-size:14.5px}
.crumb a{color:var(--muted);text-decoration:none}.crumb a:hover{color:var(--ink)}
.case-head{padding-block:28px 32px;display:flex;flex-direction:column;gap:14px}
.case-head h1{font-size:clamp(44px,7vw,88px);font-weight:800}
.case-head .lede{font-size:clamp(19px,2.2vw,24px)}
.case-hero .shot{aspect-ratio:16/8}
.factrow{display:grid;grid-template-columns:repeat(var(--n),1fr);border-top:1px solid var(--ink);margin-top:36px}
.factrow div{padding:16px 16px 0 0;min-width:0}
.factrow strong{display:block;font-family:var(--display);font-size:clamp(22px,2.6vw,32px);font-weight:600}
.factrow span{color:var(--muted);font-size:14px}
@media (max-width:760px){.factrow{grid-template-columns:1fr 1fr}.factrow div{padding-bottom:14px}}
.arc{display:grid;grid-template-columns:220px 1fr;gap:18px 40px;padding-block:56px;border-bottom:1px solid var(--line)}
.arc > *{min-width:0}
.arc h2{font-size:24px}
.arc ul{margin:0;padding:0;list-style:none}
.arc li{padding:11px 0;border-top:1px solid var(--line)}
.arc li:first-child{border-top:0;padding-top:0}
@media (max-width:760px){.arc{grid-template-columns:1fr}}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding-block:56px}
.gallery > *{min-width:0}
@media (max-width:760px){.gallery{grid-template-columns:1fr}}
.nextcase{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center;padding-block:40px;border-top:1px solid var(--ink)}
.nextcase a{font-family:var(--display);font-size:clamp(24px,3vw,36px);font-weight:600;text-decoration:none;color:var(--accent)}
.page{display:none}.page.on{display:block}
body.case-mode #top{display:none}
body:not(.case-mode) #cases{display:none}

/* ---------- How I work: a small animated guide per step ---------- */
.how{position:relative}
.how-step{position:relative;border-top:0!important;padding-top:18px}
.how-step::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--line)}
.how-step::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,var(--accent),var(--rose));transform-origin:0 50%;transform:scaleX(1)}
.how.is-on .how-step::after{animation:hw-fill .7s ease-out both;animation-delay:calc(var(--i)*1.1s)}
.how-art{background:#fff;border:1px solid var(--line);border-radius:14px;margin-bottom:14px;overflow:hidden;box-shadow:0 14px 30px -24px color-mix(in srgb,var(--ink) 50%,transparent)}
.how-art svg{display:block;width:100%;height:auto}
.how-art *{transform-box:fill-box;transform-origin:center}
.hw-card{fill:#fff;stroke:none}
.hw-faint{fill:var(--line)}
.hw-bars rect{fill:color-mix(in srgb,var(--sky) 80%,#fff);stroke:color-mix(in srgb,var(--accent) 35%,transparent)}
.hw-dot{fill:var(--rose)}
.hw-ring{fill:none;stroke:var(--rose);stroke-width:2}
.hw-glass{fill:color-mix(in srgb,var(--sky) 35%,transparent);stroke:var(--accent);stroke-width:3}
.hw-handle{stroke:var(--accent);stroke-width:5;stroke-linecap:round}
.hw-blueprint{fill:color-mix(in srgb,var(--sky) 30%,#fff)}
.hw-grid{stroke:color-mix(in srgb,var(--accent) 14%,transparent);stroke-width:1;fill:none}
.hw-wire{fill:none;stroke:var(--accent);stroke-width:2;stroke-dasharray:80;stroke-dashoffset:0}
.hw-node{fill:#fff;stroke:var(--accent);stroke-width:2}
.hw-main{fill:var(--blush);stroke:var(--rose)}
.hw-badge rect{fill:var(--rose)}
.hw-badge text,.hw-block text{font:600 10px var(--body);fill:#fff}
.hw-badge text{font-size:11px}
.hw-ground{stroke:var(--line);stroke-width:3;stroke-linecap:round}
.hw-block rect{fill:var(--accent)}
.hw-b2 rect{fill:color-mix(in srgb,var(--accent) 60%,var(--rose))}
.hw-b3 rect{fill:var(--rose)}
.hw-gear circle{fill:none;stroke:color-mix(in srgb,var(--ink) 55%,transparent);stroke-width:3}
.hw-gear .hw-gear-hole{stroke-width:2}
.hw-gear path{stroke:color-mix(in srgb,var(--ink) 55%,transparent);stroke-width:4;stroke-linecap:round}
.hw-gear{transform-origin:160px 44px!important;transform-box:view-box!important}
.hw-tick,.hw-chk{fill:none;stroke:var(--live);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:30;stroke-dashoffset:0}
.hw-doc rect:first-child{fill:#fff;stroke:var(--accent);stroke-width:2}
.hw-team circle{fill:var(--accent)}
.hw-team .hw-t2{fill:color-mix(in srgb,var(--accent) 45%,var(--rose))}
.hw-body{fill:none;stroke:var(--accent);stroke-width:4;stroke-linecap:round}
.hw-arrow{fill:none;stroke:var(--rose);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}

/* play: each step starts after the previous one (1.1s apart) */
.how.is-on .how-step .how-art{animation:hw-rise .6s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i)*1.1s)}
.how.is-on .hw-lens{animation:hw-scan 3.2s ease-in-out infinite;animation-delay:calc(var(--i)*1.1s + .3s)}
.how.is-on .hw-ring{animation:hw-pulse 1.6s ease-out infinite;animation-delay:var(--d)}
.how.is-on .hw-leak{animation:hw-pop .4s ease-out both;animation-delay:var(--d)}
.how.is-on .how-step:nth-child(2) .hw-wire{stroke-dashoffset:80;animation:hw-draw 1.2s ease-out forwards;animation-delay:1.6s}
.how.is-on .how-step:nth-child(2) .hw-node{animation:hw-pop .45s cubic-bezier(.2,1.6,.4,1) both;animation-delay:calc(1.1s + var(--d))}
.how.is-on .how-step:nth-child(2) .hw-badge{animation:hw-pop .45s cubic-bezier(.2,1.6,.4,1) both;animation-delay:calc(1.1s + var(--d))}
.how.is-on .how-step:nth-child(3) .hw-block{animation:hw-drop .55s cubic-bezier(.3,1.4,.5,1) both;animation-delay:calc(2.2s + var(--d))}
.how.is-on .hw-gear{animation:hw-spin 4s linear infinite}
.how.is-on .how-step:nth-child(3) .hw-tick{stroke-dashoffset:30;animation:hw-draw .4s ease-out forwards;animation-delay:calc(2.2s + var(--d))}
.how.is-on .how-step:nth-child(4) .hw-chk{stroke-dashoffset:30;animation:hw-draw .35s ease-out forwards;animation-delay:calc(3.3s + var(--d))}
.how.is-on .how-step:nth-child(4) .hw-doc{animation:hw-pass 4s ease-in-out infinite;animation-delay:4.8s}
.how.is-on .how-step:nth-child(4) .hw-arrow{animation:hw-nudge 1.2s ease-in-out infinite}
@keyframes hw-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes hw-rise{from{transform:translateY(24px) rotateX(-25deg);opacity:.3}to{transform:none;opacity:1}}
@keyframes hw-scan{0%,100%{transform:translateX(0)}45%,55%{transform:translateX(104px)}}
@keyframes hw-pulse{0%{transform:scale(1);opacity:.9}100%{transform:scale(3.2);opacity:0}}
@keyframes hw-pop{0%{transform:scale(0)}100%{transform:scale(1)}}
@keyframes hw-draw{to{stroke-dashoffset:0}}
@keyframes hw-drop{0%{transform:translateY(-70px);opacity:0}100%{transform:none;opacity:1}}
@keyframes hw-spin{to{transform:rotate(360deg)}}
@keyframes hw-pass{0%,15%{transform:none}45%,65%{transform:translateX(58px) scale(.6);opacity:.2}80%,100%{transform:none;opacity:1}}
@keyframes hw-nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}
@media (prefers-reduced-motion: reduce){.how *,.how *::after{animation:none!important}}

@media (min-width:901px) and (max-width:1340px){body{padding-right:64px}.pg{right:14px}}

/* who this is for: two cards */
.fit{display:grid;grid-template-columns:1.15fr 1fr;gap:20px;margin-top:40px}
.fit > div{border-top:0!important;padding-top:0}
.fit-card{position:relative;border-radius:18px;padding:30px 28px 26px;border:1px solid var(--line);min-width:0}
.fit-card.yes{background:linear-gradient(160deg,var(--fill),#fff 70%);border-color:color-mix(in srgb,var(--accent) 35%,var(--line));box-shadow:0 24px 44px -32px color-mix(in srgb,var(--accent) 60%,transparent)}
.fit-card.no{background:color-mix(in srgb,var(--blush) 55%,#fff)}
.fit-card h3{font-size:22px;margin-bottom:14px}
.fit-card ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.fit-card li{display:flex;gap:12px;align-items:flex-start;font-size:16px;line-height:1.45}
.fit-card li svg{flex:none;width:22px;height:22px;padding:3px;border-radius:50%;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;margin-top:1px}
.fit-card.yes li svg{background:var(--accent);stroke:#fff}
.fit-card.no li svg{background:color-mix(in srgb,var(--muted) 18%,#fff);stroke:var(--muted)}
.fit-card.no li{color:var(--muted)}
.fit-badge{position:absolute;top:-16px;right:22px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;box-shadow:0 8px 18px -8px color-mix(in srgb,var(--ink) 40%,transparent)}
.fit-badge svg{width:18px;height:18px;fill:none;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
.yes .fit-badge{background:var(--accent)}.yes .fit-badge svg{stroke:#fff}
.no .fit-badge{background:#fff;border:1px solid var(--line)}.no .fit-badge svg{stroke:var(--muted)}
@media (max-width:760px){.fit{grid-template-columns:1fr}}

/* hero photo stands on the logo band instead of floating */
.intro{align-items:end;padding-bottom:0}
.intro > div:first-child{align-self:center;padding-bottom:56px}
.hero-photo{align-self:end;padding:24px 0 0}
.hero-photo .orbit{position:absolute;inset:0;pointer-events:none}
.hero-photo .me{position:relative;z-index:0;margin-bottom:-1px;filter:none}
section.trusted{position:relative;z-index:1}
.trusted-cap{text-align:center;margin:16px auto 0}
@media (max-width:820px){.intro{padding-bottom:0}.hero-photo .orbit{position:static;display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:12px}}

/* Sound familiar: one copy column + grounded photo on the stats bar */
.letter-body.with-pose{grid-template-columns:1.3fr .7fr;align-items:end;gap:clamp(24px,4vw,64px)}
.letter-copy{display:flex;flex-direction:column;gap:18px;align-self:center;padding-bottom:40px;max-width:640px}
.letter-copy p.big{max-width:none}
.letter-copy > div p + p{margin-top:12px}
.letter-body.with-pose .pose-think{order:0;margin:0 auto -1px;max-width:360px;filter:none}
.letter .statbar{margin-top:0;position:relative;z-index:1}
.statbar > div{min-width:0}
@media (max-width:900px){.letter-copy{padding-bottom:0}.letter-body.with-pose .pose-think{max-width:260px}}

/* tool chips with logos */
.toolwall span{display:inline-flex;align-items:center;gap:8px;padding:7px 13px 7px 9px}
.toolwall .ti{width:18px;height:18px;flex:none;display:block}
.toolwall .tm{display:grid;place-items:center;border-radius:5px;background:color-mix(in srgb,var(--accent) 14%,#fff);color:var(--accent);font:700 9px/1 var(--body);letter-spacing:-.02em}

/* ---------- section rhythm: image / light / color ---------- */
section[data-band]{position:relative;isolation:isolate;padding-block:clamp(64px,8vw,104px)!important;margin-block:clamp(40px,6vw,72px)}
section[data-band]::before{content:'';position:absolute;top:0;bottom:0;left:calc(50% - 50vw);right:calc(50% - 50vw);z-index:-1}
section[data-band='color']::before{background:radial-gradient(70% 90% at 85% 0%,color-mix(in srgb,#2FB3B0 45%,transparent),transparent 60%),linear-gradient(135deg,#0E7C7F 0%,#123A63 100%)}
section[data-band='image']::before{background:linear-gradient(180deg,color-mix(in srgb,var(--paper) 55%,transparent),color-mix(in srgb,var(--paper) 30%,transparent)),url(/img/hero-cover.jpg) center/cover no-repeat;filter:saturate(.35) sepia(.1)}
section[data-band='color']{color:#fff}
section[data-band='color'] .label{border-image:none!important;border-top:1px solid rgba(255,255,255,.35)}
section[data-band='color'] .label h2,section[data-band='color'] > h2{color:#fff}
section[data-band='color'] .label .mono{color:rgba(255,255,255,.78)}
section[data-band='color'] .toolcat{color:#BFEDEA}
section[data-band='color'] .how-step h3{color:#fff}
section[data-band='color'] .how-step p{color:rgba(255,255,255,.82)}
section[data-band='color'] .how-step .mono{color:#BFEDEA}
section[data-band='color'] .how-step::before{background:rgba(255,255,255,.25)}
section[data-band='color'] .how-step::after{background:linear-gradient(90deg,#BFEDEA,#fff)}
section[data-band='color'] .toolrail{-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
section[data-band='color'] .lane{border-color:rgba(255,255,255,.4);box-shadow:0 30px 60px -40px rgba(0,0,0,.45)}
section[data-band='image'] .cta{background:color-mix(in srgb,#fff 72%,transparent);backdrop-filter:blur(10px)}
section[data-band='color'] .lane,section[data-band='color'] .lane h3,section[data-band='color'] .lane h4,section[data-band='color'] .toolwall span{color:var(--ink)}
/* no floating photos: stand on the cards, or fade into the page */
.offer-intro{margin-bottom:0;align-items:end}
.offer-intro .offer-copy{align-self:center}
.pose-present{align-self:end;margin:0 0 -1px;position:relative;z-index:0}
#offer .tiers{position:relative;z-index:1}
.pose-meet,.pose-about{-webkit-mask-image:linear-gradient(#000 72%,transparent 98%);mask-image:linear-gradient(#000 72%,transparent 98%)}
@media (max-width:900px){.pose-present{margin:0 auto -1px}}
/* crop the empty space above the head in the cut-out photos */
.pose-think{aspect-ratio:2/2.6;object-fit:cover;object-position:50% 100%}
.pose-present{aspect-ratio:2/2.75;object-fit:cover;object-position:50% 100%}
.pose-meet{aspect-ratio:2/2.7;object-fit:cover;object-position:50% 100%}
.pose-phone{aspect-ratio:2/2.6;object-fit:cover;object-position:50% 100%}
/* tighter Sound familiar */
.letter .label{margin-bottom:12px}
.letter-copy{padding-bottom:28px}
.letter-body.with-pose{gap:clamp(20px,3vw,48px)}
/* Meet Hazzel: proper gap above, fuller photo, no dead space before the climb */
#about{padding-top:clamp(56px,7vw,96px)!important}
.meet{grid-template-columns:.85fr 1.4fr;align-items:center;gap:clamp(20px,3vw,48px)}
.pose-meet{max-width:420px;width:100%}
.climb-wrap{position:relative;margin-top:8px}
.climb-wrap .climb{height:300px}
.climb-cap{position:absolute;left:0;top:18px;display:flex;flex-direction:column;gap:4px;max-width:30%}
.climb-cap .mono{color:var(--accent);font-size:11.5px;text-transform:uppercase;letter-spacing:.08em}
.climb-cap b{font-family:var(--display);font-size:clamp(26px,3vw,40px);line-height:1.05;color:var(--ink)}
.climb-cap .muted{font-size:14.5px}
@media (max-width:700px){.climb-cap{position:static;max-width:none;margin-bottom:12px}}
/* gentle climb: near-equal cards, small rise, no empty corner */
.climb-wrap .climb{height:250px;padding-top:24px}
.climb-wrap{margin-top:28px}
#about{padding-bottom:clamp(40px,5vw,64px)!important}
/* How I work: Hazzel presents the four steps */
#how{padding-bottom:0!important}
.how-layout{display:grid;grid-template-columns:1fr minmax(240px,320px);gap:clamp(12px,2vw,28px);align-items:end}
.how-layout > .steps{min-width:0;padding-bottom:clamp(56px,7vw,96px);align-self:center}
.how-layout .steps{gap:16px}
.pose-point{width:100%;aspect-ratio:2/2.75;object-fit:cover;object-position:50% 100%;display:block;margin-bottom:-1px;filter:drop-shadow(0 0 40px rgba(191,237,234,.25))}
/* Ways to work together: leaning on the laptop, standing on the cards */
.pose-laptop{align-self:end;width:100%;max-width:380px;aspect-ratio:2/2.2;object-fit:cover;object-position:50% 100%;display:block;margin:0 0 -1px auto;position:relative;z-index:0}
@media (max-width:1000px){.how-layout{grid-template-columns:1fr}.pose-point{max-width:260px;margin:0 auto -1px}.how-layout > .steps{padding-bottom:24px}}
@media (max-width:900px){.pose-laptop{margin:0 auto -1px;max-width:280px}}
/* fit cards: restore inner padding and even borders (old .fit > div rules were leaking in) */
.fit > .fit-card{padding:34px 30px 28px!important;border-top:1px solid var(--line)!important}
.fit > .fit-card.yes{border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line))!important}
.fit > .fit-card.no{border:1px solid var(--line)!important}
.fit{align-items:stretch;margin-top:44px}
#offer{padding-bottom:clamp(48px,6vw,72px)!important}
.offer-intro .offer-copy{justify-self:start}
/* hero: less empty space, bigger photo */
.intro{padding-top:clamp(28px,4vw,56px)}
.intro > div:first-child{padding-bottom:40px}
.hero-photo{padding-top:8px}
.hero-photo .me{max-width:460px;width:100%;aspect-ratio:2/2.6;object-fit:cover;object-position:50% 100%}
.chip.l1,.chip.r1{top:34%}.chip.l2,.chip.r2{top:47%}.chip.l3,.chip.r3{top:60%}.chip.l4,.chip.r4{top:73%}
.chip.l1,.chip.l4{right:calc(50% + 150px)}.chip.l2,.chip.l3{right:calc(50% + 162px)}
.chip.r1,.chip.r4{left:calc(50% + 150px)}.chip.r2,.chip.r3{left:calc(50% + 162px)}
/* hero + image bands: on-brand art drawn in SVG (cream, teal, dark blue), no pink */
.intro::before{background:url(/img/hero-art.svg) 60% center/cover no-repeat!important;filter:none!important}
section[data-band='image']::before{background:linear-gradient(180deg,color-mix(in srgb,var(--paper) 35%,transparent),color-mix(in srgb,var(--paper) 15%,transparent)),url(/img/hero-art.svg) center/cover no-repeat!important;filter:none!important}

/* ---------- work chapters with live automation flows ---------- */
.chapter-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.chapter{position:relative;display:flex;flex-direction:column;gap:14px;padding:22px;border-radius:18px;background:#fff;border:1px solid var(--line);text-decoration:none;color:var(--ink);overflow:hidden;transition:transform .25s,box-shadow .25s,border-color .25s;min-width:0}
.chapter:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--accent) 45%,var(--line));box-shadow:0 26px 50px -34px color-mix(in srgb,var(--accent) 70%,transparent)}
.ch-num{position:absolute;right:16px;top:6px;font-family:var(--display);font-weight:800;font-size:64px;line-height:1;color:color-mix(in srgb,var(--accent) 12%,#fff);pointer-events:none}
.ch-txt{display:flex;flex-direction:column;gap:4px;position:relative}
.ch-txt b{font-family:var(--display);font-size:22px}
.ch-txt span{color:var(--muted);font-size:14.5px}
.ch-go{color:var(--accent);font-size:12px;letter-spacing:.06em}
.flow{width:100%;height:auto;background:color-mix(in srgb,var(--fill) 70%,#fff);border-radius:12px}
.flow-wire{stroke:var(--line);stroke-width:3;fill:none}
.flow-run{stroke:var(--accent);stroke-width:3;fill:none;stroke-dasharray:6 194;stroke-linecap:round;animation:flow-run 2.4s linear infinite}
.flow-node circle{fill:#fff;stroke:var(--accent);stroke-width:2}
.flow-node text{font:700 12px var(--body);fill:var(--rose)}
.flow-node{animation:flow-node 2.4s ease-in-out infinite;animation-delay:calc(var(--n)*.8s);transform-box:fill-box;transform-origin:center}
.flow-dot{fill:var(--rose);animation:flow-dot 2.4s linear infinite;offset-path:path('M30 32H230')}
@keyframes flow-run{to{stroke-dashoffset:-200}}
@keyframes flow-dot{from{offset-distance:0%}to{offset-distance:100%}}
@keyframes flow-node{0%,70%,100%{transform:scale(1)}15%{transform:scale(1.18)}}
.chapter:nth-child(2) .flow-run,.chapter:nth-child(2) .flow-dot{animation-delay:-.8s}
.chapter:nth-child(3) .flow-run,.chapter:nth-child(3) .flow-dot{animation-delay:-1.6s}
.ch-tag{display:inline-grid;place-items:center;min-width:42px;height:30px;margin-right:12px;padding:0 8px;border-radius:7px;background:var(--accent);color:#fff;font:600 14px var(--mono);vertical-align:middle;transform:translateY(-4px)}
@media (max-width:900px){.chapter-grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion: reduce){.flow *{animation:none!important}}

/* ---------- case snapshot / key insight ---------- */
.snapshot{display:grid;grid-template-columns:1fr 1fr 1.3fr 1.2fr;margin-top:28px;border:1px solid var(--line);border-radius:16px;background:#fff;overflow:hidden}
.snapshot > div{padding:18px 20px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:6px;min-width:0}
.snapshot > div:last-child{border-right:0}
.snapshot .mono{color:var(--accent);font-size:11px;text-transform:uppercase;letter-spacing:.08em}
.snapshot b{font-family:var(--display);font-size:16px;line-height:1.3}
.snap-res{background:color-mix(in srgb,var(--fill) 60%,#fff)}
.tools-row{display:flex;flex-wrap:wrap;gap:6px}
.tl{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;border:1px solid var(--line);border-radius:7px;padding:3px 8px 3px 4px;background:#fff}
.tl img{width:16px;height:16px}
.tl b{display:grid;place-items:center;width:16px;height:16px;border-radius:4px;background:color-mix(in srgb,var(--accent) 14%,#fff);color:var(--accent);font:700 8px var(--body)!important}
.insight{margin:8px 0 0;padding:22px 24px;border-left:4px solid var(--accent);background:linear-gradient(90deg,color-mix(in srgb,var(--fill) 80%,#fff),transparent);border-radius:0 14px 14px 0}
.insight .mono{color:var(--accent);font-size:11px;text-transform:uppercase;letter-spacing:.08em}
.insight p{font-family:var(--display);font-size:clamp(19px,2vw,24px);font-weight:600;line-height:1.35;max-width:52ch;margin-top:6px}
@media (max-width:860px){.snapshot{grid-template-columns:1fr 1fr}.snapshot > div:nth-child(2){border-right:0}.snapshot > div:nth-child(-n+2){border-bottom:1px solid var(--line)}}

/* ---------- company logos on the climb ---------- */
.step-logos{display:flex;gap:6px;margin:2px 0 4px}
.step-logos img{width:28px;height:28px;object-fit:contain;background:#fff;border:1px solid var(--line);border-radius:7px;padding:3px}

/* flow icons */
.flow-ic{fill:none;stroke:var(--rose);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.flow-node:last-child .flow-ic,.flow-node:nth-last-of-type(1) .flow-ic{stroke:var(--accent)}

/* ---------- HQ live mini-dashboard ---------- */
.hq-live{position:relative;display:grid!important;grid-template-columns:44px 1fr;padding:0!important;text-align:left;background:#fff!important;aspect-ratio:16/9;overflow:hidden;font-size:12px}
.hq-side{background:var(--ink);display:flex;flex-direction:column;align-items:center;gap:12px;padding:14px 0}
.hq-side i{width:20px;height:20px;border-radius:6px;background:rgba(255,255,255,.14)}
.hq-side i.on{background:var(--accent)}
.hq-main{display:flex;flex-direction:column;gap:10px;padding:14px 16px;min-width:0}
.hq-top{display:flex;align-items:center;gap:10px}
.hq-top b{font-family:var(--display);font-size:16px}
.hq-top .mono{color:var(--muted);font-size:10.5px}
.hq-pill{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font:600 10.5px var(--body);color:var(--live);background:color-mix(in srgb,var(--live) 12%,#fff);padding:3px 8px;border-radius:7px}
.hq-pill .dot{width:6px;height:6px;margin:0;box-shadow:none}
.hq-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.hq-kpis > div{border:1px solid var(--line);border-radius:10px;padding:8px 10px;display:flex;flex-direction:column;gap:2px}
.hq-kpis .mono{font-size:9.5px;color:var(--muted)}
.hq-kpis b{font-family:var(--display);font-size:clamp(16px,1.8vw,22px);font-variant-numeric:tabular-nums}
.hq-body{display:grid;grid-template-columns:1fr 1.15fr;gap:8px;flex:1;min-height:0}
.hq-chart,.hq-jobs{border:1px solid var(--line);border-radius:10px;padding:8px 10px;display:flex;flex-direction:column;gap:6px;min-width:0}
.hq-chart .mono,.hq-jobs .mono{font-size:9.5px;color:var(--muted)}
.bars{flex:1;display:flex;align-items:flex-end;gap:5px;min-height:50px}
.bars i{flex:1;height:calc(var(--v)*100%);border-radius:4px 4px 2px 2px;background:linear-gradient(180deg,var(--accent),color-mix(in srgb,var(--accent) 45%,#fff));transform-origin:bottom;transform:scaleY(.08);transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.hq-live.on .bars i{transform:scaleY(1)}
.bars i:last-child{background:linear-gradient(180deg,var(--rose),var(--accent))}
.job{display:flex;justify-content:space-between;gap:8px;align-items:center;padding:3px 0;border-top:1px solid var(--line);font-size:11px}
.job:first-of-type{border-top:0}
.job span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.job em{font:600 9.5px var(--mono);font-style:normal;padding:2px 6px;border-radius:6px;background:color-mix(in srgb,var(--live) 12%,#fff);color:var(--live)}
.job em.run{background:color-mix(in srgb,var(--accent) 14%,#fff);color:var(--accent)}
.job em.queued{background:var(--blush);color:var(--muted)}
.job em.run::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:currentColor;margin-right:4px;animation:pulse 1.2s infinite}
.hq-toast{position:absolute;right:14px;bottom:14px;background:var(--ink);color:#fff;font:600 11.5px var(--body);padding:8px 12px;border-radius:10px;box-shadow:0 14px 30px -14px rgba(14,34,64,.6);transform:translateY(140%);opacity:0;transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .5s}
.hq-toast b{color:#7FE0C3}
.hq-toast.show{transform:none;opacity:1}
.hq-watch{position:absolute;left:58px;bottom:12px;display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:#fff;border-radius:9px;padding:5px 10px 5px 5px;font:600 11.5px var(--body);color:var(--ink);cursor:default}
.hq-watch .play{width:22px;height:22px;margin:0}
.hq-watch .play::after{left:8px;top:6px;border-left-width:8px;border-top-width:5px;border-bottom-width:5px}
.hq-live{place-items:stretch!important;align-items:stretch!important;justify-items:stretch!important}.hq-live > *{min-height:0}
.hq-chart{display:grid!important;grid-template-rows:auto 1fr}
.bars{height:100%;min-height:60px}
.hq-watch{position:static!important;margin-left:auto;padding:3px 8px 3px 3px!important;font-size:10.5px!important}
.hq-top .hq-pill{margin-left:6px}
/* real store screenshots */
.shot-img{display:block;width:100%;aspect-ratio:1200/517;object-fit:cover;object-position:top;background:var(--fill)}
.tile .shot-img{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.tile:hover .shot-img{transform:scale(1.04)}
.live-link{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;text-decoration:none;font-weight:600;color:#fff;background:var(--accent);padding:10px 16px;border-radius:9px}
.live-link .mono{font-weight:400;font-size:12px;opacity:.85}
.live-link:hover{filter:brightness(1.08)}
/* Experience: a living timeline */
.jobs{position:relative;padding-left:34px!important}
.jobs::before,.jobs::after{content:'';position:absolute;left:9px;top:6px;bottom:6px;width:2px;border-radius:2px}
.jobs::before{background:var(--line)}
.jobs::after{background:linear-gradient(var(--accent),var(--rose));transform-origin:top;transform:scaleY(var(--jf,1))}
.jobs li{position:relative;transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.jobs li::before{content:'';position:absolute;left:-31px;top:24px;width:14px;height:14px;border-radius:50%;background:var(--paper);border:2px solid var(--line);transition:background .4s,border-color .4s,box-shadow .4s;z-index:1}
.jobs li:first-child::before{top:4px}
.jobs.alive li:not(.in){opacity:.25;transform:translateX(28px)}
.jobs li.lit::before{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 18%,transparent)}
.jobs li:hover{background:color-mix(in srgb,var(--fill) 55%,transparent);border-radius:12px}
.job-co{display:flex;align-items:center;gap:8px}
.job-co img{width:22px;height:22px;object-fit:contain;background:#fff;border:1px solid var(--line);border-radius:6px;padding:2px}
@media (prefers-reduced-motion: reduce){.jobs li{transition:none}.jobs.alive li:not(.in){opacity:1;transform:none}}

/* customer journey: stage tags + decision-point prompts */
.journey{display:inline-flex;align-items:center;gap:8px;margin-bottom:10px;font:600 11.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.journey b{display:grid;place-items:center;width:24px;height:24px;border-radius:7px;background:var(--accent);color:#fff;font-size:11px}
section[data-band='color'] .journey{color:#BFEDEA}
section[data-band='color'] .journey b{background:#fff;color:var(--accent)}
.next-step{display:flex;align-items:center;gap:12px;justify-content:center;margin:40px auto 0;width:max-content;max-width:100%;padding:12px 18px;border-radius:9px;border:1px solid var(--line);background:#fff;text-decoration:none;color:var(--ink);transition:transform .25s,box-shadow .25s}
.next-step span{color:var(--muted)}
.next-step b{font-family:var(--display)}
.next-step i{font-style:normal;color:var(--accent);animation:cue 1.6s ease-in-out infinite}
.next-step:hover{transform:translateY(-2px);box-shadow:0 18px 30px -22px color-mix(in srgb,var(--accent) 70%,transparent)}
.next-step.strong{background:var(--accent);border-color:var(--accent);color:#fff}
.next-step.strong span{color:rgba(255,255,255,.8)}
.next-step.strong i{color:#fff}
.next-step.inline{margin:6px 0 0;align-self:flex-start}
.gshot{margin:0;display:flex;flex-direction:column;gap:8px}.gshot figcaption{color:var(--muted);font-size:12px}.shot-img.g{aspect-ratio:960/416}

/* ---------- More work / All work gallery ---------- */
.chapter-grid{grid-template-columns:repeat(4,1fr)}
@media (max-width:1100px){.chapter-grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.chapter-grid{grid-template-columns:1fr}}
.aw-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.aw-grid.home{margin-bottom:8px}
.aw-card{display:flex;flex-direction:column;gap:12px;text-decoration:none;color:var(--ink);min-width:0}
.aw-frame{position:relative;aspect-ratio:16/10;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:linear-gradient(135deg,var(--fill),#fff)}
.aw-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.aw-card:hover .aw-img{transform:scale(1.05)}
.aw-card:hover .aw-frame{border-color:color-mix(in srgb,var(--accent) 45%,var(--line));box-shadow:0 24px 44px -30px color-mix(in srgb,var(--accent) 70%,transparent)}
.aw-mark{position:absolute;inset:0;display:grid;place-items:center;padding:16px;text-align:center;font-family:var(--display);font-size:22px;font-weight:800;color:var(--accent);opacity:0}
.aw-card.noimg .aw-mark{opacity:1}
.aw-meta{display:flex;flex-direction:column;gap:2px}
.aw-meta .mono{color:var(--accent);font-size:11px;text-transform:uppercase;letter-spacing:.08em}
.aw-meta b{font-family:var(--display);font-size:19px}
.aw-meta span:last-child{color:var(--muted);font-size:14.5px}
.aw-filters{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 28px}
.aw-f{font:600 14px var(--body);border:1px solid var(--line);background:#fff;color:var(--ink);padding:8px 14px;border-radius:9px;cursor:pointer;display:inline-flex;gap:8px;align-items:center}
.aw-f span{font:500 11.5px var(--mono);color:var(--muted)}
.aw-f.on{background:var(--accent);border-color:var(--accent);color:#fff}
.aw-f.on span{color:rgba(255,255,255,.8)}
@media (max-width:900px){.aw-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.aw-grid{grid-template-columns:1fr}}

/* ---------- 05 Social media ---------- */
.chapter-grid{grid-template-columns:repeat(5,1fr)}
@media (max-width:1100px){.chapter-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.chapter-grid{grid-template-columns:1fr}}
.soc-head{display:grid;grid-template-columns:1fr 1.1fr;gap:48px;align-items:center;margin-bottom:36px}
.soc-lede{font-size:19px;line-height:1.6;color:var(--ink);margin:0;max-width:46ch}
.soc-bars{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.soc-bars li{display:grid;grid-template-columns:140px 1fr 34px;gap:12px;align-items:center;font-size:14px}
.soc-bars li span{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.soc-bars li i{height:10px;border-radius:999px;background:var(--fill);position:relative;overflow:hidden}
.soc-bars li i::after{content:'';position:absolute;inset:0;width:calc(var(--v)*100%);border-radius:inherit;background:linear-gradient(90deg,var(--rose),var(--accent));transform-origin:left;transform:scaleX(0);transition:transform 1.1s cubic-bezier(.2,.8,.2,1) calc(var(--i)*90ms)}
.soc-bars.on li i::after{transform:scaleX(1)}
.soc-bars li b{font-family:var(--display);text-align:right;font-variant-numeric:tabular-nums}
.soc-marquee{display:grid;gap:18px;margin:0 calc(50% - 50vw);padding:6px 0;-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.soc-row{overflow:hidden}
.soc-track{display:flex;gap:18px;width:max-content;animation:socScroll 70s linear infinite}
.soc-row.rev .soc-track{animation-direction:reverse;animation-duration:80s}
.soc-marquee:hover .soc-track{animation-play-state:paused}
@keyframes socScroll{to{transform:translateX(calc(-50% - 9px))}}
.soc-card{position:relative;flex:0 0 auto;width:220px;aspect-ratio:4/5;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:var(--fill);color:#fff;text-decoration:none;box-shadow:0 18px 34px -26px rgba(14,34,64,.55);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.soc-card img{width:100%;height:100%;object-fit:cover;display:block}
.soc-cap{position:absolute;inset:auto 0 0 0;padding:34px 12px 12px;display:flex;flex-direction:column;gap:2px;background:linear-gradient(180deg,transparent,rgba(14,34,64,.88));opacity:0;transform:translateY(8px);transition:opacity .3s,transform .3s}
.soc-cap em{font:600 10px var(--mono);font-style:normal;text-transform:uppercase;letter-spacing:.08em;color:#BFEDEA}
.soc-cap b{font-family:var(--display);font-size:15px}
.soc-cap span{font-size:12.5px;line-height:1.35;color:rgba(255,255,255,.85)}
.soc-card:hover,.soc-card:focus-visible{transform:translateY(-6px) rotate(-1deg)}
.soc-card:hover .soc-cap,.soc-card:focus-visible .soc-cap{opacity:1;transform:none}
@media (max-width:900px){.soc-head{grid-template-columns:1fr;gap:24px}.soc-card{width:170px}}
@media (prefers-reduced-motion:reduce){.soc-track{animation:none}.soc-row{overflow-x:auto}}
.aw-card[hidden]{display:none}
.aw-card.email .aw-img{object-position:top center}

/* ---------- whole images, never cropped ---------- */
.aw-frame{background:var(--fill)}
.aw-img{object-fit:contain!important;object-position:center!important}
.aw-card:hover .aw-img{transform:scale(1.02)}
.aw-card.phone .aw-frame,.aw-card[data-cat="Social"] .aw-frame{background:linear-gradient(160deg,var(--fill),var(--sky))}
.aw-card.phone .aw-img,.aw-card[data-cat="Social"] .aw-img{inset:14px 0;height:calc(100% - 28px);filter:drop-shadow(0 14px 22px rgba(14,34,64,.22))}
.aw-card.phone .aw-img{object-position:top center!important;border-radius:0}
button.aw-card{font:inherit;text-align:left;background:none;border:0;padding:0;cursor:pointer}
.aw-open{font:600 13px var(--body);color:var(--accent);margin-top:-4px}
.aw-card:hover .aw-open{text-decoration:underline}

/* ---------- gallery dialog ---------- */
.gal{width:min(1180px,calc(100vw - 32px));height:min(88vh,980px);max-height:none;padding:0;border:0;border-radius:18px;background:var(--paper);color:var(--ink);box-shadow:0 40px 90px -30px rgba(14,34,64,.55)}
.gal::backdrop{background:rgba(14,34,64,.55);backdrop-filter:blur(4px)}
.gal-in{display:flex;flex-direction:column;height:100%}
.gal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:22px 26px 16px;border-bottom:1px solid var(--line)}
.gal-head h2{margin:0;font-family:var(--display);font-size:clamp(22px,3vw,30px)}
.gal-head p{margin:4px 0 0;color:var(--muted);font-size:12.5px}
.gal-x{flex:0 0 auto;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:#fff;font-size:22px;line-height:1;cursor:pointer;color:var(--ink)}
.gal-x:hover{border-color:var(--accent);color:var(--accent)}
.gal-grid{flex:1;overflow:auto;padding:22px 26px 30px;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:22px;align-items:start}
.gal-grid.phone{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.gal-grid.wide{grid-template-columns:repeat(auto-fill,minmax(440px,1fr))}
.gal-item{margin:0;display:flex;flex-direction:column;gap:8px}
.gal-item img,.gal-item video{width:100%;height:auto;display:block;border-radius:12px;border:1px solid var(--line);background:#fff;box-shadow:0 16px 30px -24px rgba(14,34,64,.6)}
.gal-item video{aspect-ratio:9/16;object-fit:cover;background:var(--ink)}
.gal-item.land{grid-column:1/-1}
.gal-item.land video{aspect-ratio:auto;object-fit:contain}
.gal-grid.phone .gal-item img{border-radius:22px;border:6px solid var(--ink)}
.gal-item figcaption{display:flex;flex-direction:column;gap:1px}
.gal-item em{font:600 10px var(--mono);font-style:normal;text-transform:uppercase;letter-spacing:.08em;color:var(--accent)}
.gal-item b{font-size:14px;line-height:1.35}
@media (max-width:640px){.gal{width:100vw;height:100vh;border-radius:0}.gal-grid{grid-template-columns:1fr 1fr;gap:14px;padding:16px}.gal-head{padding:16px}}
.soc-bar-btn{all:unset;cursor:pointer;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.soc-bar-btn:hover,.soc-bar-btn:focus-visible{color:var(--accent);text-decoration:underline}

/* ---------- nav shows where you are ---------- */
nav.top .links a[data-nav]{position:relative}
nav.top .links a[data-nav].on{color:var(--accent)}
nav.top .links a[data-nav]::after{content:'';position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;background:var(--accent);transform:scaleX(0);transition:transform .3s}
nav.top .links a[data-nav].on::after{transform:scaleX(1)}

/* ---------- HQ animated demo: Hello Shop HQ's real look (globals.css light theme), sample data ---------- */
.hqd{--bg:#ede7d8;--panel:#fff;--panel-2:#efe9db;--border:#e4ddcb;--text:#1f1d1a;--muted:#6b6659;--brand:#57b0a9;--brand-dark:#2f6b66;--red:#d6473d;
  --ok-bg:rgba(99,153,34,.16);--ok-fg:#27500a;--warn-bg:rgba(184,134,11,.16);--warn-fg:#8a6d0b;--info-bg:rgba(127,119,221,.15);--info-fg:#3c3489;
  --shadow:0 8px 22px rgba(31,29,26,.09),0 2px 5px rgba(31,29,26,.06);--hfont:'Lexend',var(--display);--bfont:'Inter',var(--body);position:relative}
.hqd-app{position:relative;display:grid;grid-template-columns:212px 1fr;aspect-ratio:16/10;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:var(--bg);color:var(--text);font:12.5px/1.4 var(--bfont);box-shadow:0 40px 80px -46px rgba(14,34,64,.55);text-align:left;user-select:none}
.hqd svg{flex:0 0 auto}
/* sidebar */
.hqd .side{background:linear-gradient(180deg,var(--panel) 0%,var(--panel) 60%,var(--panel-2) 100%);border-right:1px solid var(--border);box-shadow:8px 0 28px rgba(31,29,26,.06);padding:12px 10px;display:flex;flex-direction:column;gap:8px;min-width:0;z-index:1}
.hqd .brand{display:flex;align-items:center;gap:8px;padding:2px 6px 6px}.hqd .brand svg{width:26px;height:26px}.hqd .brand b{font:600 14px var(--hfont)}
.hqd .side nav{display:flex;flex-direction:column;gap:6px;overflow:hidden;flex:1}
.hqd .nav-ghead{display:block;font:700 8.5px var(--bfont);letter-spacing:.09em;text-transform:uppercase;color:var(--muted);padding:2px 8px}
.hqd .nav-item{position:relative;display:flex;align-items:center;gap:8px;padding:4px 8px;border-radius:10px;font:500 11.5px var(--bfont);color:var(--muted);transition:background .25s,color .25s,transform .25s}
.hqd .nav-item .ib{display:grid;place-items:center;width:20px;height:20px;border-radius:7px}.hqd .nav-item .ib svg{width:12px;height:12px}
.hqd .t-work .ib{background:rgba(47,143,134,.16);color:#1f6259}.hqd .t-company .ib{background:rgba(111,91,196,.16);color:#5a48a8}.hqd .t-growth .ib{background:rgba(200,92,52,.17);color:#963f1a}.hqd .t-tools .ib{background:rgba(58,110,168,.16);color:#2f5c8f}
.hqd .nav-item .chev{margin-left:auto;opacity:.5}.hqd .nav-item .bdg{margin-left:auto;background:#c93f35;color:#fff;font:700 9.5px/15px var(--bfont);min-width:15px;padding:0 4px;border-radius:999px;text-align:center}
.hqd .nav-item[data-view]{cursor:pointer}.hqd .nav-item[data-view]:hover{background:var(--panel-2);transform:translateX(2px)}
.hqd .nav-item.active{background:linear-gradient(135deg,#357a75,#2f6b66);color:#fff;font-weight:600;box-shadow:0 10px 18px rgba(87,176,169,.38),inset 0 1px 0 rgba(255,255,255,.28)}
.hqd .nav-item.active::before{content:'';position:absolute;left:-10px;top:4px;bottom:4px;width:4px;border-radius:0 4px 4px 0;background:var(--brand-dark)}
.hqd .nav-item.active .ib{background:rgba(255,255,255,.18);color:#fff}
.hqd .side-profile{display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:7px 9px}
.hqd .side-profile b{display:block;font-size:11.5px}.hqd .side-profile span:not(.av){font-size:10.5px;color:var(--muted)}
.hqd .av{position:relative;display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,#7e8a4e,#57b0a9);color:#fff;font:700 9.5px var(--bfont);flex:0 0 auto}
.hqd .av.big{width:30px;height:30px;font-size:10.5px}.hqd .av.big i{position:absolute;right:-1px;bottom:-1px;width:9px;height:9px;border-radius:50%;background:#5bbf6a;border:2px solid #fff}
.hqd .av.g{background:linear-gradient(135deg,#f6c25b,#f4a579)}.hqd .av.s{width:20px;height:20px;font-size:8px;margin-right:7px;vertical-align:middle}
/* main */
.hqd-main{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0}
.hqd .appbar{position:absolute;top:10px;right:14px;z-index:3;display:flex;gap:4px;padding:4px;border-radius:14px;background:rgba(255,255,255,.72);backdrop-filter:blur(12px);border:1px solid var(--border)}
.hqd .appbar span{position:relative;display:grid;place-items:center;width:26px;height:26px;border-radius:9px;color:var(--muted)}.hqd .appbar svg{width:14px;height:14px}
.hqd .appbar .pip{position:absolute;top:4px;right:5px;width:6px;height:6px;border-radius:50%;background:var(--red);animation:pulse 1.4s infinite}
.hqd-view{flex:1;min-height:0;padding:16px 20px;overflow:hidden;position:relative}
.hqd-view>div{height:100%;display:flex;flex-direction:column;gap:10px}
.hqd-view .enter{animation:hqdIn .45s cubic-bezier(.2,.8,.2,1)}@keyframes hqdIn{from{opacity:0;transform:translateY(10px)}}
.hqd .topbar h1{margin:0;font:600 19px var(--hfont);letter-spacing:-.01em}.hqd .topbar .sub{margin:2px 0 0;font-size:11.5px;color:var(--muted)}
.hqd .hqtabs .seg{display:inline-flex;gap:2px;padding:3px;border-radius:9px;background:var(--panel-2);border:1px solid var(--border)}
.hqd .hqtabs .seg button{all:unset;font:600 11px var(--hfont);padding:4px 11px;border-radius:6px;color:var(--muted)}
.hqd .hqtabs .seg button.on{background:var(--panel);color:var(--text);box-shadow:inset 0 -2px 0 var(--brand)}
.hqd .card{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:12px 14px;box-shadow:var(--shadow);min-width:0}
.hqd .card h3{margin:0 0 8px;font:600 13px var(--hfont)}
.hqd .tile{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:9px 12px;box-shadow:var(--shadow)}
.hqd .tile span{display:block;font-size:11px;color:var(--muted)}.hqd .tile b{font:700 21px var(--hfont);font-variant-numeric:tabular-nums}.hqd .tile em{font-style:normal;color:var(--muted);margin-left:3px}
.hqd .pill{display:inline-block;font:600 10.5px var(--bfont);padding:2px 8px;border-radius:7px;background:var(--panel-2);color:var(--muted);white-space:nowrap}
.hqd .pill.on,.hqd .pill.ok{background:var(--ok-bg);color:var(--ok-fg)}.hqd .pill.brk{background:rgba(246,194,91,.22);color:#8a6316}.hqd .pill.run{background:var(--info-bg);color:var(--info-fg)}
.hqd .pill.run::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:currentColor;margin-right:5px;animation:pulse 1s infinite}
.hqd table{width:100%;border-collapse:collapse;font-size:11.5px}.hqd th{font:600 9.5px var(--bfont);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);text-align:left;padding:4px 6px;border-bottom:1px solid var(--border)}
.hqd td{padding:6px;border-bottom:1px solid var(--border);white-space:nowrap}.hqd tr:last-child td{border-bottom:0}
.hqd tr.flash td{animation:hqdFlash 1.1s}@keyframes hqdFlash{30%{background:rgba(87,176,169,.14)}}
.hqd .hqchip{display:inline-block;font:700 8.5px/14px var(--bfont);font-style:normal;padding:0 5px;border-radius:5px;color:#fff;margin-right:2px}.hqd .hqchip.fb{background:#1877f2}.hqd .hqchip.ig{background:linear-gradient(45deg,#f58529,#dd2a7b,#8134af)}
/* home */
.hqd .h-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:10px;flex:1;min-height:0}
.hqd .stand .mvp{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;background:linear-gradient(135deg,rgba(246,194,91,.22),rgba(244,165,121,.18));margin-bottom:6px}
.hqd .stand .mvp b{display:block;font:600 13px var(--hfont)}.hqd .stand .mvp span{font-size:11px;color:var(--muted)}.hqd .stand .mvp .trophy{margin-left:auto;font-size:18px;color:#c98a0b}
.hqd .stand .rk{display:grid;grid-template-columns:14px 24px 60px 1fr 26px;gap:8px;align-items:center;padding:4px 0;font-size:11.5px}.hqd .stand .rk .n{color:var(--muted);font:600 10.5px var(--mono)}
.hqd .stand .rk .bar{height:6px;border-radius:999px;background:var(--panel-2);overflow:hidden}.hqd .stand .rk .bar i{display:block;height:100%;width:calc(var(--v)*100%);background:linear-gradient(90deg,#57b0a9,#2f6b66);border-radius:inherit;transform:scaleX(0);transform-origin:left;transition:transform 1s cubic-bezier(.2,.8,.2,1)}
.hqd .stand.on .rk .bar i{transform:none}.hqd .stand .pts{text-align:right;font:600 11px var(--mono)}
.hqd .h-side{display:flex;flex-direction:column;gap:10px}.hqd .h-side .tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.hqd .moments .mo{display:flex;gap:10px;align-items:center;padding:5px 0}.hqd .moments .mo>span{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:var(--panel-2);font-size:13px}
.hqd .moments b{display:block;font-size:12px}.hqd .moments .mo div span{font-size:10.5px;color:var(--muted)}
/* pipeline */
.hqd .lanes{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;flex:1;min-height:0}
.hqd .lane{background:var(--panel-2);border:1px solid var(--border);border-radius:12px;padding:8px;display:flex;flex-direction:column;gap:7px}
.hqd .lane .lh{display:flex;justify-content:space-between;align-items:center;font:600 11px var(--hfont)}.hqd .lane .n{font:600 10px var(--bfont);background:var(--panel);border-radius:999px;padding:0 6px;color:var(--muted)}
.hqd .pc{background:var(--panel);border:1px solid var(--border);border-radius:11px;padding:7px 8px;display:flex;flex-direction:column;gap:5px;box-shadow:0 2px 5px rgba(31,29,26,.05);transition:box-shadow .3s,transform .3s}
.hqd .pc .pt{display:flex;gap:7px}.hqd .pc .sw{width:26px;height:32px;border-radius:6px;flex:0 0 auto;background:linear-gradient(135deg,#f6c25b,#f4a579)}.hqd .pc .t-reel{background:linear-gradient(135deg,#66bab2,#2f6b66)}.hqd .pc .t-carousel{background:linear-gradient(135deg,#a99fe0,#5a48a8)}
.hqd .pc b{display:block;font-size:11px;line-height:1.25}.hqd .pc .st{font-size:9.5px;color:var(--muted)}.hqd .pc .pf{display:flex;justify-content:space-between;align-items:center}.hqd .pc .when{font:500 9px var(--mono);color:var(--brand-dark)}
.hqd .pc .stat{align-self:flex-start;font:600 9.5px var(--bfont);padding:2px 7px;border-radius:7px;background:var(--panel-2);color:var(--muted)}
.hqd .pc .stat.work{background:var(--info-bg);color:var(--info-fg)}.hqd .pc .stat.go{background:rgba(87,176,169,.18);color:var(--brand-dark)}.hqd .pc .stat.ok{background:var(--ok-bg);color:var(--ok-fg)}
.hqd .pc.lift{box-shadow:0 18px 30px -14px rgba(31,29,26,.4);transform:rotate(-2deg) scale(1.03);position:relative;z-index:2}
.hqd .v-pipe{position:relative}.hqd .confirm{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:290px;background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:14px;box-shadow:0 30px 60px -20px rgba(31,29,26,.45);display:flex;flex-direction:column;gap:8px;z-index:4;animation:hqdIn .3s}
.hqd .confirm b{font:600 14px var(--hfont)}.hqd .confirm span{font-size:11.5px;color:var(--muted)}.hqd .confirm button{all:unset;align-self:flex-end;background:var(--brand-dark);color:#fff;font:600 11.5px var(--hfont);padding:6px 14px;border-radius:9px}
/* timesheet */
.hqd .t-grid{display:grid;grid-template-columns:.8fr 1.6fr;gap:10px;flex:1;min-height:0;align-items:start}
.hqd .clockc{display:flex;flex-direction:column;gap:6px;transition:border-color .3s}.hqd .clockc .state{font:600 11px var(--hfont);color:var(--muted)}.hqd .clockc.on .state{color:var(--ok-fg)}
.hqd .clockc .timer{font:700 28px var(--hfont);font-variant-numeric:tabular-nums}.hqd .clockc.on{border-color:rgba(87,176,169,.6)}
.hqd .clockc .btns{display:flex;flex-wrap:wrap;gap:6px}.hqd .clockc button{all:unset;font:600 11px var(--hfont);padding:6px 12px;border-radius:9px}
.hqd .b-in{background:var(--brand-dark);color:#fff}.hqd .b-ghost,.hqd .b-out{border:1px solid var(--border);color:var(--text)}.hqd .b-brk{background:rgba(246,194,91,.25);color:#8a6316}
/* inbox */
.hqd .ibx{display:grid;grid-template-columns:.8fr 1.5fr;gap:10px;flex:1;min-height:0}
.hqd .ibx .list{padding:6px}.hqd .ibx .th{display:grid;grid-template-columns:1fr auto;gap:1px 6px;padding:7px 8px;border-radius:10px;font-size:11.5px}.hqd .ibx .th.on{background:var(--panel-2)}
.hqd .ibx .lab{font:600 9px var(--bfont);padding:1px 6px;border-radius:7px;color:#fff;align-self:center}.hqd .ibx .l-customer{background:#2b7a5f}.hqd .ibx .l-vip{background:#7a5cc0}
.hqd .ibx .pv{grid-column:1;color:var(--muted);font-size:10.5px}.hqd .ibx .th em{grid-column:2;font-style:normal;justify-self:end;background:#c93f35;color:#fff;border-radius:999px;font-size:9.5px;min-width:15px;text-align:center}
.hqd .conv{display:flex;flex-direction:column;gap:6px}.hqd .msgs{flex:1;display:flex;flex-direction:column;gap:7px;justify-content:flex-end}
.hqd .m{max-width:80%;padding:6px 10px;border-radius:12px;font-size:11.5px;animation:hqdIn .35s}.hqd .m.in{background:var(--panel-2);align-self:flex-start}.hqd .m.out{background:var(--brand-dark);color:#fff;align-self:flex-end}
.hqd .m.sys{align-self:center;font:500 10px var(--mono);color:var(--muted);border:1px dashed var(--border)}
.hqd .conv .tools{display:flex;gap:6px}.hqd .conv .tools span{font:600 10px var(--bfont);padding:3px 8px;border-radius:7px;background:var(--panel-2);color:var(--muted)}
.hqd .compose{display:flex;gap:6px}.hqd .compose .ph{flex:1;color:var(--muted);font-size:11.5px;border:1px solid var(--border);border-radius:9px;padding:6px 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hqd .compose .ph.typing{color:var(--text)}.hqd .compose button{all:unset;background:var(--brand-dark);color:#fff;font:600 11px var(--hfont);padding:6px 13px;border-radius:9px}
/* automations */
.hqd .v-auto .cells{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.hqd .strip{display:inline-flex;gap:2px;vertical-align:middle}.hqd .strip i{width:4px;height:14px;border-radius:2px;background:#6aa84f}.hqd .strip i.skip{opacity:.3}
/* analytics */
.hqd .a-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:10px;flex:1;min-height:0}.hqd .a-grid .wide{grid-column:1/-1}
.hqd .funnel .fr{display:grid;grid-template-columns:78px 1fr 50px;gap:8px;align-items:center;padding:3px 0;font-size:11px}.hqd .funnel .fr b{text-align:right;font:600 11px var(--mono)}
.hqd .funnel .fr i{height:14px;border-radius:5px;background:var(--c);width:calc(var(--v)*100%);transform:scaleX(0);transform-origin:left;transition:transform 1s cubic-bezier(.2,.8,.2,1)}
.hqd .v-ana.on .funnel .fr i{transform:none}.hqd .v-ana .fr:nth-child(2) i{transition-delay:.15s}.hqd .v-ana .fr:nth-child(3) i{transition-delay:.3s}.hqd .v-ana .fr:nth-child(4) i{transition-delay:.45s}
.hqd .donut{display:flex;align-items:center;gap:14px}.hqd .donut svg{width:84px;height:84px;transform:rotate(-90deg)}.hqd .donut circle{fill:none;stroke-width:6;stroke-dasharray:0 100;transition:stroke-dasharray 1.1s cubic-bezier(.2,.8,.2,1)}
.hqd .donut .r1{stroke:#2a78d6}.hqd .donut .r2{stroke:#eb6834}.hqd .donut .r3{stroke:#1baf7a}
.hqd .v-ana.on .r1{stroke-dasharray:68 100}.hqd .v-ana.on .r2{stroke-dasharray:27 100;stroke-dashoffset:-68}.hqd .v-ana.on .r3{stroke-dasharray:5 100;stroke-dashoffset:-95}
.hqd .donut ul{list-style:none;margin:0;padding:0;font-size:11px;display:flex;flex-direction:column;gap:4px}.hqd .donut li i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:6px}
.hqd .spark{width:100%;height:56px}.hqd .spark path{fill:none;stroke:#2a78d6;stroke-width:2.2;stroke-dasharray:420;stroke-dashoffset:420;transition:stroke-dashoffset 1.6s ease}.hqd .v-ana.on .spark path{stroke-dashoffset:0}
/* web-hosted */
.hqd .v-stores .grid{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}
.hqd .sc{position:relative;background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:8px 10px;display:flex;flex-direction:column;gap:1px;overflow:hidden;box-shadow:0 2px 5px rgba(31,29,26,.05);transition:border-color .3s}
.hqd .sc b{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:10px}.hqd .sc .ln{font:500 9px var(--mono);color:var(--muted)}
.hqd .sc .dot{position:absolute;top:10px;right:9px;width:7px;height:7px;border-radius:50%;background:var(--border)}
.hqd .sc.run{border-color:var(--brand)}.hqd .sc.run .dot{background:var(--brand);animation:pulse .7s infinite}.hqd .sc.done .dot{background:#6aa84f}.hqd .sc.done .ln{color:var(--ok-fg)}
.hqd .sc.run::after{content:'';position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--brand);transform-origin:left;animation:hqdBar .45s linear}@keyframes hqdBar{from{transform:scaleX(0)}}
.hqd .sync-all{all:unset;align-self:flex-start;display:inline-flex;gap:6px;align-items:center;background:var(--brand-dark);color:#fff;font:600 11.5px var(--hfont);padding:7px 14px;border-radius:9px}.hqd .sync-all svg{width:13px;height:13px}
/* cursor, toast, chapters */
.hqd-cur{position:absolute;left:0;top:0;width:22px;height:22px;z-index:9;pointer-events:none;transform:translate(60%,60%);transition:transform .6s cubic-bezier(.45,.05,.2,1)}
.hqd-cur svg{width:22px;height:22px;fill:var(--text);stroke:#fff;stroke-width:1.5;filter:drop-shadow(0 3px 4px rgba(0,0,0,.25))}
.hqd-cur::after{content:'';position:absolute;left:-10px;top:-10px;width:24px;height:24px;border-radius:50%;background:var(--brand);opacity:0}
.hqd-cur.clk::after{animation:hqdClick .5s}@keyframes hqdClick{0%{opacity:.55;transform:scale(.3)}100%{opacity:0;transform:scale(1.6)}}
.hqd-toast{position:absolute;right:16px;bottom:16px;z-index:8;background:#1f1d1a;color:#fff;font:600 11.5px var(--bfont);padding:9px 13px;border-radius:12px;box-shadow:0 14px 30px -14px rgba(0,0,0,.6);transform:translateY(130%);opacity:0;transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .45s}
.hqd-toast b{color:#8fe0d9}.hqd-toast.show{transform:none;opacity:1}
.hqd-chapters{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-top:14px}
.hqd-chapters button{position:relative;overflow:hidden;font:600 12.5px var(--body);color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:9px;padding:9px 10px;text-align:left;cursor:pointer;display:flex;gap:7px;align-items:center;white-space:nowrap}
.hqd-chapters button span{font:500 10.5px var(--mono);color:var(--muted)}
.hqd-chapters button i{position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--accent);transform:scaleX(0);transform-origin:left}
.hqd-chapters button.on{border-color:var(--accent);color:var(--accent)}.hqd-chapters button.on i{animation:hqdProg 8s linear forwards}
.hqd.paused .hqd-chapters button.on i{animation-play-state:paused}@keyframes hqdProg{to{transform:scaleX(1)}}
.hqd-hint{display:block;margin-top:8px;font:500 11.5px var(--mono);color:var(--muted);text-align:center}
/* minis in the gallery: a scaled-down full app, looping one module */
.hqd-mini{position:relative;aspect-ratio:16/10;overflow:hidden}
.hqd-mini .hqd{position:absolute;left:0;top:0;width:1100px;transform-origin:0 0}
.hqd-mini .hqd-app{border-radius:0;border:0;box-shadow:none}
@media (max-width:1000px){.hqd-chapters{grid-template-columns:repeat(4,1fr)}}
@media (max-width:700px){.hqd-app{grid-template-columns:1fr;aspect-ratio:3/4}.hqd .side{display:none}.hqd-chapters{grid-template-columns:repeat(2,1fr)}}

.hqd-mini.home{border-radius:16px;border:1px solid var(--line);box-shadow:0 40px 80px -46px rgba(14,34,64,.55)}
.hqd-gallery .screen{padding:0;overflow:hidden}
.hqd-gallery .hqd-mini{border-top:1px solid var(--line)}

/* ---------- HazzaHub: phone demo, own-business block ---------- */
.flag.flip{grid-template-columns:1fr 1fr;margin-top:clamp(56px,8vw,96px)}
.hz-flag .own{color:#F16823;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.hzd{display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,3vw,36px);align-items:center}
.hzd-phone{position:relative;width:clamp(210px,22vw,270px);aspect-ratio:390/844;border-radius:38px;padding:10px;background:#1B1B1B;box-shadow:0 40px 70px -34px rgba(14,34,64,.6),inset 0 0 0 2px #3a3a3a}
.hzd-notch{position:absolute;top:16px;left:50%;transform:translateX(-50%);width:34%;height:18px;border-radius:999px;background:#1B1B1B;z-index:3}
.hzd-screen{position:relative;width:100%;height:100%;border-radius:29px;overflow:hidden;background:#FCEFDA}
.hzd-screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:0;transform:translateX(18%);transition:opacity .5s,transform .6s cubic-bezier(.2,.8,.2,1)}
.hzd-screen img.on{opacity:1;transform:none;z-index:1}.hzd-screen img.out{opacity:0;transform:translateX(-18%)}
.hzd-tap{position:absolute;z-index:4;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:rgba(241,104,35,.45);opacity:0;pointer-events:none}
.hzd-tap.go{animation:hzTap .7s ease-out}@keyframes hzTap{0%{opacity:.9;transform:scale(.3)}100%{opacity:0;transform:scale(1.6)}}
.hzd-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;min-width:0}
.hzd-steps button{all:unset;position:relative;display:grid;grid-template-columns:auto 1fr;column-gap:10px;padding:7px 12px;border-radius:9px;cursor:pointer;overflow:hidden;transition:background .3s}
.hzd-steps em{grid-row:span 2;align-self:start;font:600 10px var(--mono);font-style:normal;text-transform:uppercase;letter-spacing:.06em;padding:3px 6px;border-radius:7px;margin-top:2px}
.hzd-steps .w-customer{background:#FDE7DA;color:#B4471A}.hzd-steps .w-hopper{background:#DCEBDF;color:#215B36}.hzd-steps .w-both{background:var(--fill);color:var(--accent)}
.hzd-steps b{font-family:var(--display);font-size:15px;color:var(--ink)}.hzd-steps span{font-size:13px;color:var(--muted);display:none}
.hzd-steps li.on button{background:#fff;box-shadow:0 14px 28px -22px rgba(14,34,64,.55)}.hzd-steps li.on span{display:block}
.hzd-steps li.done b{color:var(--muted)}
.hzd-steps i{position:absolute;left:0;bottom:0;height:2px;width:100%;background:#F16823;transform:scaleX(0);transform-origin:left}
.hzd-steps li.on i{animation:hzProg 2.8s linear forwards}.hzd:hover .hzd-steps li.on i{animation-play-state:paused}@keyframes hzProg{to{transform:scaleX(1)}}
.hzd.home .hzd-steps button{padding:5px 10px}.hzd.home .hzd-steps b{font-size:14px}
.hz-hero{margin:8px 0 40px;padding:clamp(20px,4vw,44px);border-radius:20px;background:linear-gradient(135deg,#FCEFDA,#FDE7DA 60%,#E9F3EC);border:1px solid var(--line)}
.hz-hero .hzd{justify-content:center;grid-template-columns:auto minmax(0,420px)}
.hz-hero .hzd-steps span{display:block}.hz-hero .hzd-steps li:not(.on) span{display:none}
@media (max-width:900px){.flag.flip{grid-template-columns:1fr}}
@media (max-width:640px){.hzd,.hz-hero .hzd{grid-template-columns:1fr;justify-items:center}.hzd-steps{width:100%}}

/* ---------- Automation demos: GoHighLevel-style workflow, Klaviyo-style flow (sample data) ---------- */
.ad-show{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-bottom:clamp(40px,6vw,64px)}
.ad-card{display:flex;flex-direction:column;gap:12px;min-width:0}
.ad-cap{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.ad-cap b{font-family:var(--display);font-size:20px}.ad-cap span{font:500 12px var(--mono);color:var(--muted)}
.ad-wrap{position:relative;overflow:hidden;border-radius:16px;border:1px solid var(--line);box-shadow:0 34px 70px -44px rgba(14,34,64,.55)}
.ad{position:absolute;left:0;top:0;width:1000px;transform-origin:0 0}
.ad-note{font-size:14px;color:var(--muted);margin:0}
.ad-app{position:relative;width:1000px;overflow:hidden;font-family:'Inter',var(--body);user-select:none}
.ad-canvas{position:absolute;inset:0}
.ad-edges{position:absolute;left:0;top:0;pointer-events:none}
.nd{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;gap:10px;text-align:left;transition:box-shadow .3s,border-color .3s}
.nd b{display:block;font-size:13px}.nd span{font-size:11.5px}
.nd .ni{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;flex:0 0 auto}.nd .ni svg{width:16px;height:16px}
.nd .cnt{margin-left:auto;font:600 10.5px 'Inter',sans-serif;min-width:22px;padding:2px 6px;border-radius:999px;text-align:center}
.nd.hit{animation:adHit .7s}
.ad-tok{position:absolute;left:0;top:0;z-index:5;display:flex;align-items:center;gap:6px;margin:-14px 0 0 -14px;transition:transform .6s cubic-bezier(.45,.05,.2,1),opacity .4s}
.ad-tok svg{width:28px;height:28px;padding:6px;border-radius:50%;color:#fff;box-shadow:0 6px 14px rgba(0,0,0,.25)}
.ad-tok i{font:600 10.5px 'Inter',sans-serif;font-style:normal;padding:2px 7px;border-radius:999px;white-space:nowrap}
.ad-tok.gone{opacity:0}
/* GoHighLevel-style */
.ad-ghl{background-color:#F3F4F6;background-image:radial-gradient(#D5D9E0 1.2px,transparent 1.2px);background-size:18px 18px;color:#101828}
.g-top{position:relative;z-index:3;display:flex;align-items:center;gap:14px;height:56px;padding:0 18px;background:#fff;border-bottom:1px solid #EAECF0;font-size:13px}
.g-back{color:#475467;font-size:12.5px}.g-top b{font-size:14px}.g-top nav{display:flex;gap:16px;margin-left:18px;color:#475467;font-size:12.5px}
.g-top nav .on{color:#155EEF;font-weight:600;box-shadow:inset 0 -2px 0 #155EEF;padding-bottom:17px;margin-bottom:-19px}
.g-pub{margin-left:auto;display:flex;align-items:center;gap:7px;color:#344054;font-size:12.5px}.g-pub i{width:30px;height:17px;border-radius:999px;background:#155EEF;position:relative}.g-pub i::after{content:'';position:absolute;right:2px;top:2px;width:13px;height:13px;border-radius:50%;background:#fff}
.g-save{background:#155EEF;color:#fff;font-weight:600;font-size:12.5px;padding:7px 16px;border-radius:8px}
.ad-ghl .ad-edges path{fill:none;stroke:#98A2B3;stroke-width:1.6}.ad-ghl .ad-edges text{font:600 11px 'Inter';fill:#475467}
.ad-ghl .plus{fill:#fff;stroke:#98A2B3;stroke-width:1.2}.ad-ghl .plus-x{stroke:#667085;stroke-width:1.4}
.ad-ghl .nd{width:262px;background:#fff;border:1px solid #D0D5DD;border-radius:10px;padding:9px 11px;box-shadow:0 1px 3px rgba(16,24,40,.08)}
.ad-ghl .nd span{color:#667085}.ad-ghl .cnt{background:#F2F4F7;color:#344054}
.g-trig{border-style:dashed!important;border-color:#155EEF!important}.g-trig .ni{background:#EFF4FF;color:#155EEF}
.g-act .ni{background:#ECFDF3;color:#039855}.g-wait .ni{background:#FFFAEB;color:#DC6803}.g-split .ni{background:#F4F3FF;color:#6938EF}
.g-end{width:auto!important;padding:5px 14px!important;font:700 11px 'Inter';color:#475467;border-radius:999px!important}
.ad-ghl .nd.hit{border-color:#155EEF;box-shadow:0 0 0 4px rgba(21,94,239,.15)}
.ad-ghl .ad-tok svg{background:#155EEF}.ad-ghl .ad-tok i{background:#101828;color:#fff}
.g-stats{position:absolute;left:18px;top:74px;display:flex;flex-direction:column;gap:6px;z-index:2}
.g-stats span{background:#fff;border:1px solid #EAECF0;border-radius:8px;padding:6px 10px;font-size:11.5px;color:#475467;min-width:120px}.g-stats b{display:block;font-size:18px;color:#101828}
/* Klaviyo-style */
.ad-klaviyo{background:#F7F7F5;color:#1A1A1A}
.k-top{position:relative;z-index:3;display:flex;justify-content:space-between;align-items:center;height:64px;padding:0 20px;background:#fff;border-bottom:1px solid #E6E6E3}
.k-crumb{color:#6B6B6B;font-size:12.5px;margin-right:6px}.k-top b{font-size:17px}
.k-live{display:inline-flex;align-items:center;gap:6px;margin-left:10px;font-size:11.5px;font-weight:600;color:#137333;background:#E6F4EA;padding:3px 9px;border-radius:999px}.k-live i{width:7px;height:7px;border-radius:50%;background:#1E8E3E}
.k-kpis{display:flex;gap:18px}.k-kpis span{font-size:11px;color:#6B6B6B;display:flex;flex-direction:column}.k-kpis b{font-size:16px;color:#1A1A1A;font-variant-numeric:tabular-nums}
.ad-klaviyo .ad-edges path{fill:none;stroke:#B9B9B4;stroke-width:1.8}.ad-klaviyo .ad-edges text{font:700 11px 'Inter';fill:#4B4B4B}
.ad-klaviyo .plus,.ad-klaviyo .plus-x{display:none}
.ad-klaviyo .nd{background:#fff;border:1px solid #E1E1DC;border-radius:8px;padding:9px 12px;box-shadow:0 2px 6px rgba(0,0,0,.05)}
.ad-klaviyo .nd span{color:#6B6B6B}.ad-klaviyo .cnt{background:#F1F1EE;color:#4B4B4B}
.k-trig{width:250px;border-top:3px solid #1A1A1A!important}.k-trig .ni{background:#1A1A1A;color:#fff}
.k-delay{width:170px;border-radius:999px!important;padding:6px 12px!important}.k-delay .ni{width:22px;height:22px;background:#F1F1EE;color:#4B4B4B}.k-delay b{font-size:12px}
.k-mail{width:330px;align-items:stretch!important;border-left:4px solid #2F6FEB!important}
.k-thumb{flex:0 0 auto;width:56px;border-radius:5px;background:#F4EFE7;display:flex;flex-direction:column;gap:4px;padding:6px}.k-thumb i{display:block;height:6px;border-radius:2px;background:#D9CFC0}.k-thumb i:first-child{height:16px;background:#C9B79C}
.k-mail em{font-style:normal;font-size:10.5px;font-weight:700;color:#2F6FEB;text-transform:uppercase;letter-spacing:.05em}.k-mail b{font-size:13px;margin:1px 0 4px}
.k-m{display:flex;gap:10px}.k-m span{font-size:10.5px}.k-m b{display:inline;font-size:11px;color:#1A1A1A;margin:0}
.k-split{width:300px;border-left:4px solid #8E44AD!important}.k-split .ni{background:#F3E8F8;color:#8E44AD}
.k-sms{width:250px;border-left:4px solid #1E8E3E!important}.k-sms .ni{background:#E6F4EA;color:#1E8E3E}
.k-exit{width:180px}.k-exit .ni{background:#F1F1EE;color:#6B6B6B}.k-exit.win{border-color:#1E8E3E}
.ad-klaviyo .nd.hit{box-shadow:0 0 0 4px rgba(47,111,235,.16);border-color:#2F6FEB}
.ad-klaviyo .ad-tok svg{background:#1A1A1A}.ad-klaviyo .ad-tok i{background:#fff;color:#1A1A1A;border:1px solid #E1E1DC}
@keyframes adHit{30%{transform:translate(-50%,-50%) scale(1.04)}}
@media (max-width:900px){.ad-show{grid-template-columns:1fr}}

#marketing .grid{grid-template-columns:repeat(2,1fr)}
.ad-show.case{margin:8px 0 40px}

/* ---------- Make.com-style scenario (sample data) ---------- */
.ad-card.mk-card{grid-column:1/-1}
.ad-make{background:#F6F5FB;background-image:radial-gradient(#E1DCF0 1.2px,transparent 1.2px);background-size:20px 20px;color:#1F1A33}
.mk-top{position:relative;z-index:3;display:flex;align-items:center;gap:14px;height:50px;padding:0 18px;background:#fff;border-bottom:1px solid #ECE8F5;font-size:13px}
.mk-logo{display:flex;align-items:center;gap:7px;color:#6D00CC;font-weight:700;font-size:12.5px}.mk-logo i{width:18px;height:18px;border-radius:5px;background:linear-gradient(135deg,#6D00CC,#F024F6)}
.mk-top b{font-size:14px}.mk-on{margin-left:auto;display:flex;align-items:center;gap:7px;font-size:12px;color:#5B5670}.mk-on i{width:8px;height:8px;border-radius:50%;background:#2DB742}
.ad-make .ad-edges path{fill:none;stroke:#BDB6D3;stroke-width:3;stroke-dasharray:1 7;stroke-linecap:round}
.ad-make .ad-edges text{font:600 11px 'Inter';fill:#6D00CC}
.mk-flt circle{fill:#fff;stroke:#BDB6D3;stroke-width:1.5}.mk-flt path{fill:#8F37E8;stroke:none}
.mk-node{position:absolute;transform:translate(-50%,-34px);display:flex;flex-direction:column;align-items:center;text-align:center;width:150px}
.mk-ball{position:relative;display:grid;place-items:center;width:68px;height:68px;border-radius:50%;background:var(--c);box-shadow:0 10px 22px -10px var(--c),inset 0 -4px 0 rgba(0,0,0,.12);margin-bottom:8px;transition:transform .3s}
.mk-ball svg{width:28px;height:28px}
.mk-ops{position:absolute;top:-6px;right:-8px;min-width:24px;height:24px;padding:0 6px;border-radius:999px;background:#fff;border:2px solid var(--c);color:#1F1A33;font:700 11px/20px 'Inter';font-style:normal}
.mk-node b{font-size:12.5px}.mk-node span:not(.mk-ball){font-size:11px;color:#6E6985;line-height:1.3}
.mk-node.hit .mk-ball{animation:mkHit .55s}@keyframes mkHit{40%{transform:scale(1.12)}}
.mk-bub{position:absolute;left:0;top:0;z-index:4;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#6D00CC;box-shadow:0 0 0 4px rgba(109,0,204,.18)}
.mk-bar{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;align-items:center;gap:16px;height:52px;padding:0 18px;background:#fff;border-top:1px solid #ECE8F5;font-size:12px;color:#5B5670}
.mk-run{background:#6D00CC;color:#fff;font-weight:700;font-size:12.5px;padding:8px 16px;border-radius:999px}
.mk-sw{display:flex;align-items:center;gap:6px;font-weight:700;font-size:11px;color:#2DB742}.mk-sw i{width:30px;height:17px;border-radius:999px;background:#2DB742;position:relative}.mk-sw i::after{content:'';position:absolute;right:2px;top:2px;width:13px;height:13px;border-radius:50%;background:#fff}
.mk-st b{color:#1F1A33;font-variant-numeric:tabular-nums;margin-left:4px}

/* ---------- contact: enquiry form, reach links, CV ---------- */
.enq{display:flex;flex-direction:column;gap:12px;width:100%;max-width:640px;margin:8px auto 0;text-align:left}
.enq-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.enq label{display:flex;flex-direction:column;gap:6px;font:600 13px var(--body);color:var(--ink)}
.enq input,.enq select,.enq textarea{font:15px var(--body);color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:9px;padding:11px 12px;outline:none;transition:border-color .2s,box-shadow .2s;resize:vertical}
.enq input:focus,.enq select:focus,.enq textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
.enq .bad{border-color:#C0392B}
.enq-act{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.enq-act .btn{border:0;cursor:pointer;font:inherit;font-weight:700}
.enq-note{font-size:13px;color:var(--muted)}
.reach{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:22px auto 0}
.reach a,.reach .copy{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:9px;border:1px solid var(--line);background:#fff;color:var(--ink);text-decoration:none;font:600 14px var(--body);cursor:pointer}
.reach a:hover,.reach .copy:hover{border-color:var(--accent);color:var(--accent)}
.reach svg,.cv-btns svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.reach .copy.ok{border-color:var(--accent);color:var(--accent)}
.foot-links{display:flex;gap:16px}.foot-links a{color:var(--ink);text-decoration:none;font-weight:600}.foot-links a:hover{color:var(--accent)}
.cv-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}.cv-btns .btn{display:inline-flex;align-items:center;gap:8px}
.btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}
@media (max-width:640px){.enq-row{grid-template-columns:1fr}}
.cta-pose .reach{justify-content:flex-start;margin-left:0;max-width:640px}
.cta-pose .enq{margin-left:0}
.enq .hp{display:none}
.enq-done{max-width:640px;padding:18px 20px;border-radius:12px;background:#fff;border:1px solid var(--line);text-align:left}
.enq-done.ok{border-color:var(--accent);background:var(--fill)}.enq-done.err{border-color:#C0392B}
.enq-done b{font-family:var(--display);font-size:20px;display:block}.enq-done p{margin:6px 0 0;color:var(--muted)}
.enq button:disabled{opacity:.6;cursor:wait}
.enq[hidden]{display:none}

.reach{flex-wrap:wrap;gap:8px}
.mail-pill{display:inline-flex;align-items:stretch;border:1px solid var(--line);border-radius:9px;background:#fff;overflow:hidden}
.mail-pill a{border:0!important;border-radius:0!important}
.reach .mail-pill .copy{display:inline-flex;align-items:center;gap:6px;border:0;border-left:1px solid var(--line);border-radius:0;background:var(--paper);padding:9px 12px;font:600 13px var(--body);color:var(--muted)}
.reach .mail-pill .copy em{font-style:normal}
.reach .mail-pill .copy svg{width:15px;height:15px}
.reach .mail-pill .copy:hover,.reach .mail-pill .copy.ok{color:var(--accent);background:var(--fill)}
.mail-pill:hover{border-color:var(--accent)}
.pending{display:none!important}