/* ================= About, rebuilt: no frame, one clear picture ================= */
.with-sky img{filter:none;opacity:.5}
.with-sky{background:#05060c}
.ab-head{position:relative;z-index:1;text-align:center;padding-top:15vh}

.ab-stage{--sp:0;--px:0px;--py:0px;position:relative;height:min(82vh,860px);margin-top:2vh}

/* the title sits behind her, so her head and shoulders overlap the letters */
.ab-title{position:absolute;left:50%;top:6%;width:100vw;transform:translate(calc(-50% + var(--px) * -1.4),calc(var(--sp) * -70px + var(--py) * -1));display:flex;flex-direction:column;align-items:center;font-weight:600;font-size:clamp(58px,15vw,290px);line-height:.84;letter-spacing:-.055em;white-space:nowrap;z-index:0;margin:0}
.ab-title em{color:#f1d48a;letter-spacing:-.025em;line-height:.92}
.ab-title span,.ab-title em{display:block;opacity:0;transform:translateY(46px);transition:opacity .8s var(--ease),transform 1s var(--ease)}
.ab-head.live .ab-title span,.ab-head.live .ab-title em{opacity:1;transform:none}
.ab-head.live .ab-title em{transition-delay:.08s}

/* flowers bloom behind her with a soft edge instead of a frame */
.ab-bloom{position:absolute;left:50%;bottom:-2%;height:92%;aspect-ratio:430/570;max-width:92vw;z-index:1;opacity:0;transform:translateX(-50%) translate(var(--px),var(--py)) scale(.8);transform-origin:50% 85%;transition:opacity 1.1s .15s var(--ease),transform 1.6s .15s var(--ease);
  -webkit-mask:radial-gradient(ellipse 50% 50% at 50% 48%,#000 52%,transparent 100%);mask:radial-gradient(ellipse 50% 50% at 50% 48%,#000 52%,transparent 100%)}
.ab-bloom img{width:100%;height:100%;object-fit:cover}
.ab-head.live .ab-bloom{opacity:.95;transform:translateX(-50%) translate(var(--px),var(--py)) scale(calc(1 + var(--sp) * .06))}

.ab-me{position:absolute;left:50%;bottom:0;height:84%;width:auto;max-width:none;z-index:2;opacity:0;transform:translateX(-50%) translate(calc(var(--px) * 1.6),calc(40px + var(--py) * 1.4));transition:opacity .9s .1s var(--ease),transform 1.2s .1s var(--ease);
  -webkit-mask:linear-gradient(#000 78%,transparent 99%);mask:linear-gradient(#000 78%,transparent 99%)}
.ab-head.live .ab-me{opacity:1;transform:translateX(-50%) translate(calc(var(--px) * 1.6),calc(var(--py) * 1.4))}

.ab-bio{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,90px);max-width:1100px;margin:5vh auto 0;text-align:left;opacity:0;transform:translateY(24px);transition:opacity .9s .35s var(--ease),transform 1s .35s var(--ease)}
.ab-head.live .ab-bio{opacity:1;transform:none}
.ab-bio p{font-family:var(--serif);font-size:clamp(20px,1.7vw,27px);line-height:1.3;text-shadow:0 2px 24px rgba(5,6,12,.95)}

/* signature: handwritten, with room for every stroke */
.ab-sign{font-family:"WindSong","Instrument Serif",cursive;font-weight:500;font-size:clamp(52px,5.6vw,96px);line-height:1.5;color:var(--cream);margin:2vh auto 0;padding:.25em .6em .35em;transform:rotate(-4deg);white-space:nowrap;overflow:visible;text-shadow:0 2px 24px rgba(5,6,12,.9)}
.ab-sign .pen{display:inline-block;clip-path:inset(-120% 100% -120% 0);transition:clip-path 0s}
.ab-head.live .ab-sign .pen{clip-path:inset(-120% -140% -120% -90%);transition:clip-path var(--t) cubic-bezier(.45,.05,.4,1) calc(.9s + var(--d))}

.with-sub{margin-top:12vh}

/* closing: "Get in touch" opens out of the spark between the fingers */
.hello-title .line>span{transform:none!important}
.hello-body{--sy:-200px;opacity:0;transform:translateY(var(--sy)) scale(.04);transform-origin:50% 0;transition:opacity .5s var(--ease),transform 1.5s cubic-bezier(.16,.84,.24,1)}
.hello.live .hello-body{opacity:1;transform:none;transition-delay:.35s}
.touch-spark{transition:transform .5s var(--ease)}
.touch-burst{position:absolute;left:37.4%;top:45.9%;width:16px;height:16px;margin:-8px;border-radius:50%;pointer-events:none;opacity:0;
  background:radial-gradient(circle,rgba(255,244,210,.95),rgba(255,214,130,.55) 35%,rgba(255,200,110,0) 70%)}
.hello.live .touch-burst{animation:burst 1.6s .1s cubic-bezier(.2,.7,.2,1) both}
@keyframes burst{0%{opacity:0;transform:scale(.4)}18%{opacity:1}100%{opacity:0;transform:scale(34)}}

@media (max-width:900px){
  .ab-stage{height:min(70vh,600px)}
  .ab-title{font-size:17vw;top:2%}
  .ab-bio{grid-template-columns:1fr;text-align:center;gap:18px}
  .ab-bloom{height:86%}
  .ab-me{height:80%}
}
@media (prefers-reduced-motion:reduce){
  .ab-title span,.ab-title em,.ab-bloom,.ab-me,.ab-bio{opacity:1!important;transition:none!important}
  .ab-sign .pen{clip-path:none!important}
  .hello-body{opacity:1!important;transform:none!important}
  .touch-burst{display:none}
}

/* keep the cloud bank on its own layer so scrolling does not redraw it */
.mist{transform:translateZ(0);will-change:transform}

/* keep "in the room" readable: she stands a little lower, flowers fuller */
.ab-me{height:71%}
.ab-bloom{height:84%;-webkit-mask:radial-gradient(ellipse 50% 50% at 50% 50%,#000 60%,transparent 100%);mask:radial-gradient(ellipse 50% 50% at 50% 50%,#000 60%,transparent 100%)}
.ab-head.live .ab-bloom{opacity:1}
@media (max-width:900px){.ab-me{height:68%}.ab-bloom{height:80%}}

/* offers stack like cards at every width: each one pins, the next slides over it */
.act{position:sticky!important;border-radius:30px 30px 0 0;box-shadow:0 -22px 60px rgba(0,0,0,.28)}
.act:first-child{border-radius:0;box-shadow:none}
.act-inner{transform-origin:50% 0}
@media (max-width:900px){
  .act{height:auto;min-height:100vh;border-radius:22px 22px 0 0}
  .act:first-child{border-radius:0}
}

/* medium widths keep the full-screen two-column cards instead of the phone layout */
@media (min-width:761px) and (max-width:900px){
  .act{height:100vh;min-height:680px}
  .act-inner{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:4vw;padding:84px 26px 30px;align-items:center}
  .act-title{font-size:min(9.6vw,19vh);white-space:nowrap;transform:translateX(calc((1 - var(--e)) * -10vw))}
  .act-lead{font-size:clamp(22px,3vw,34px)}
  .act-body{font-size:15.5px}
  .act-list li{font-size:15px;padding:9px 0}
  .arch{order:0;justify-self:end;height:min(66vh,620px);max-width:300px;transform:perspective(1100px) translateY(calc((1 - var(--e)) * 22vh)) rotateX(var(--rx)) rotateY(var(--ry));clip-path:inset(calc((1 - var(--e)) * 46%) 0 0 0 round 999px 999px 0 0)}
  .act-lines{display:block}
}
@media (min-width:761px) and (max-width:900px){
  .act-inner{padding:70px 26px 22px}
  .act-title{font-size:min(9vw,15vh);margin:12px 0 16px -.05em}
  .act-body{margin-top:12px;line-height:1.42}
  .act-list{margin-top:14px}
  .act-list li{padding:7px 0}
  .cta{margin-top:18px;padding:10px 26px 12px}
}

/* offer paintings stay still; only the machine-vision lens moves */
.arch{transform:none!important;clip-path:none!important}
.arch img,.arch-lens canvas{transform:none!important}

/* About: the whole section sits inside the flower painting */
.with{background:#07080a!important}
.with-sky{background:#07080a}
.with-sky img{transform:scale(1.5);transform-origin:50% 38%;object-position:50% 34%;opacity:0;filter:none;transition:transform 3.4s cubic-bezier(.2,.7,.2,1),opacity 1.6s var(--ease)}
.with:has(.ab-head.live) .with-sky img{opacity:.78;transform:scale(1.12);animation:sway 46s 3.4s ease-in-out infinite alternate}
@keyframes sway{from{transform:scale(1.12) translate(0,0)}to{transform:scale(1.2) translate(-1.6%,-2.2%)}}
.with-sky::after{background:
  radial-gradient(60% 55% at 50% 46%,rgba(7,8,10,.1),rgba(7,8,10,.62) 78%),
  linear-gradient(180deg,rgba(7,8,10,.72),rgba(7,8,10,.12) 22%,rgba(7,8,10,.12) 62%,rgba(7,8,10,.8))}
.ab-title{text-shadow:0 4px 50px rgba(7,8,10,.75)}
.ab-me{transition:opacity 1s .7s var(--ease),transform 1.4s .7s var(--ease);filter:drop-shadow(0 20px 40px rgba(0,0,0,.55))}
.ab-bio{transition-delay:1s}
.ab-head.live .ab-sign .pen{transition-delay:calc(1.7s + var(--d))}
.ab-bio p,.with-intro,.with-list p{text-shadow:0 2px 18px rgba(7,8,10,.95),0 0 40px rgba(7,8,10,.8)}
@media (prefers-reduced-motion:reduce){.with-sky img{opacity:.7!important;transform:scale(1.12)!important;animation:none!important}}
.with-sky::before{content:"";position:absolute;inset:0;z-index:1;background:#07080a;opacity:0;transition:opacity 1s var(--ease)}
.with.past .with-sky::before{opacity:.5}

/* the title holds still; she is the one who moves, gently */
.ab-title{transform:translate(-50%,0)!important}
.ab-head.live .ab-me{transform:translateX(-50%) translate(calc(var(--px) * 2.2),calc(var(--py) * 1.8 + var(--sp) * -34px));animation:breathe 7s 2s ease-in-out infinite alternate}
@keyframes breathe{from{translate:0 0;scale:1}to{translate:0 -7px;scale:1.014}}
.ab-me{transform-origin:50% 100%}
@media (prefers-reduced-motion:reduce){.ab-head.live .ab-me{animation:none}}
/* no scroll lift, so she never covers the lettering */
.ab-head.live .ab-me{transform:translateX(-50%) translate(calc(var(--px) * 2.2),calc(var(--py) * 1.8))}
@keyframes breathe{from{translate:0 3px;scale:1}to{translate:0 -3px;scale:1.012}}

/* portrait: no floating. It leans left and right towards the cursor */
.ab-stage{--rx:0deg;--ry:0deg;perspective:1000px}
.ab-me{transform-origin:50% 62%}
.ab-head.live .ab-me{animation:none;transform:translateX(-50%) rotateX(var(--rx)) rotateY(var(--ry)) translate(calc(var(--px) * .8),0)}

/* portrait depth: she and the flowers slide in opposite directions. No tilt, no float */
.ab-stage{perspective:none}
.ab-head.live .ab-me{animation:none;transform:translateX(-50%) translate(calc(var(--px) * 1.3),calc(var(--py) * 1.1 + var(--sp) * 30px))}
.with-sky img{--fx:0px;--fy:0px;translate:var(--fx) var(--fy)}

/* ================= About as a scroll scene =================
   only flowers at first; scrolling opens a dark clearing in the middle,
   then the title, then her, then the bio */
.with{--o:0;--zoom:1.06}
.ab-head{padding-top:0}
.ab-pin{height:290vh;margin:0 calc(clamp(22px,9vw,150px) * -1)}
.ab-pin-inner{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.ab-pin-inner .eyebrow{opacity:var(--t,0);margin-top:9vh}
.ab-stage{--t:0;--m:0;height:min(80vh,840px);margin-top:1vh;flex:0 0 auto}

/* the flowers: full and bright to begin with, pushed outward and dimmed as the space opens */
.with-sky img,.with:has(.ab-head.live) .with-sky img{opacity:1;animation:none;transition:none;transform:scale(var(--zoom));transform-origin:50% 42%}
.with-sky::after{background:
  radial-gradient(ellipse calc(18% + var(--o) * 46%) calc(22% + var(--o) * 52%) at 50% 52%,rgba(7,8,10,calc(var(--o) * .94)) 0,rgba(7,8,10,calc(var(--o) * .9)) 55%,rgba(7,8,10,calc(var(--o) * .5)) 100%),
  linear-gradient(180deg,rgba(7,8,10,.5),rgba(7,8,10,0) 16%,rgba(7,8,10,0) 80%,rgba(7,8,10,.55))}

/* title and portrait are tied to the scroll, not to a timer */
.ab-title span,.ab-title em,.ab-head.live .ab-title span,.ab-head.live .ab-title em{opacity:var(--t);transform:translateY(calc((1 - var(--t)) * 60px));transition:none}
.ab-title em{transform:translateY(calc((1 - var(--t)) * 90px))!important}
.ab-me,.ab-head.live .ab-me{opacity:var(--m);animation:none;transition:none;transform:translateX(-50%) translate(calc(var(--px) * 1.3),calc(var(--py) * 1.1 + (1 - var(--m)) * 70px)) scale(calc(.94 + var(--m) * .06));transform-origin:50% 100%}

.ab-bio{margin-top:-6vh;transition-delay:.1s}
.ab-head.live .ab-sign .pen{transition-delay:calc(.7s + var(--d))}
@media (max-width:900px){.ab-pin{height:260vh}.ab-stage{height:min(66vh,580px)}}
@media (prefers-reduced-motion:reduce){.ab-pin{height:auto}.ab-pin-inner{position:static;height:auto}}

/* intersection: clip both circles explicitly. Some browsers stop honouring the rounded
   overflow once the layers inside are moved or blended, which showed the AI circle as a square */
.ring{clip-path:circle(50% at 50% 50%);-webkit-clip-path:circle(50% at 50% 50%);isolation:isolate}