/* About: one idea open at a time. Everything below applies only once about.js adds .ab-on (no-JS and reduced motion show it all). */
.about-now{position:absolute;left:18px;top:18px;background:#101010;color:#fff;font:600 12px var(--sans);letter-spacing:.04em;padding:8px 12px;border-radius:2px;opacity:0;transform:translateY(-6px);transition:opacity .3s,transform .3s;pointer-events:none}
.about-now.on{opacity:1;transform:none}
.about-now small{color:var(--red);font-weight:600;margin-left:8px}
.ab-on .ab-line{display:inline-block;will-change:transform,opacity}
.ab-on .ab-sent{transition:color .2s}
.ab-on .owned>div{will-change:transform,opacity}
/* Principles: bold line always visible; supporting sentence opens for the one in focus */
.ab-on .principles li{grid-template-rows:auto 0fr;transition:grid-template-rows .45s cubic-bezier(.2,.7,.2,1)}
.ab-on .principles li>span{overflow:hidden;min-height:0;opacity:0;transition:opacity .35s}
.ab-on .principles li.open{grid-template-rows:auto 1fr}
.ab-on .principles li.open>span{opacity:1}
.ab-on .principles li:before{color:#c9c6bf;transition:color .3s}
.ab-on .principles li.open:before{color:var(--red)}
.ab-on .principles li b{transition:color .3s;color:#9a9a9a}
.ab-on .principles li.open b{color:var(--ink)}
.ab-on .principles li{display:grid;grid-template-columns:46px 1fr}
.ab-on .principles li>b{grid-column:2}.ab-on .principles li>span{grid-column:2}
.ab-on .principles li:before{grid-row:1/3}
/* Experience: brand + platform rows; description opens for the row in focus */
.ab-on .record,.ab-on .record tbody,.ab-on .record tr,.ab-on .record td{display:block;width:auto}
.ab-on .record tr{border-top:1px solid var(--line);padding:14px 0}
.ab-on .record td{border:0;padding:0}
.ab-on .record td:first-child{display:flex;align-items:baseline;justify-content:space-between;gap:16px;width:auto;color:#9a9a9a;transition:color .3s}
.ab-on .record td:first-child .stk{margin:0;font-size:12px}
.ab-on .record tr.open td:first-child{color:var(--ink)}
.ab-on .record td:last-child{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.2,.7,.2,1)}
.ab-on .record td:last-child>div{overflow:hidden;min-height:0;opacity:0;transition:opacity .35s}
.ab-on .record tr.open td:last-child{grid-template-rows:1fr}
.ab-on .record tr.open td:last-child>div{opacity:1;padding-top:8px}
/* Promise: key line with a drawn red underline */
.promise b{background-image:linear-gradient(var(--red),var(--red));background-repeat:no-repeat;background-position:0 100%;background-size:calc(var(--u,1)*100%) 2px;padding-bottom:3px}
@media(prefers-reduced-motion:reduce){.about-now{display:none}}
/* Contact: single path, WhatsApp as a quiet line under the form */
.enq-wa{margin-top:14px;font-size:14px;color:#555;text-align:center}
.enq-wa a{color:#101010;font-weight:600;text-decoration:none;border-bottom:1.5px solid var(--red);padding-bottom:1px}
.enq-wa a:hover{color:var(--red)}
.formmsg:empty{display:none}
body.contact-in-view>.wa{visibility:hidden;pointer-events:none}

/* Proof stays legible; platform labels live only in their experience rows. */
.ab-on .ab-sent{transition:color .55s ease}.ab-on .record td:first-child,.ab-on .principles li b{transition:color .5s ease}
/* Availability dot: a slow live pulse (owner request). The dot breathes and a ring ripples out. */
.contact .avail i{position:relative;flex:0 0 9px;animation:availBreath 2.4s ease-in-out infinite!important}
.contact .avail i:after{content:'';position:absolute;inset:0;border-radius:50%;background:var(--red);animation:availRing 2.4s ease-out infinite}
@keyframes availBreath{0%,100%{transform:scale(1)}50%{transform:scale(1.35)}}
@keyframes availRing{0%{transform:scale(1);opacity:.55}80%,100%{transform:scale(3.2);opacity:0}}
@media(prefers-reduced-motion:reduce){.contact .avail i,.contact .avail i:after{animation:none!important}}
/* Hairline before sentence-ending full stops in Anton display type (punct.js). */
.dp{margin-left:.05em;color:inherit!important}