/* Shared interaction states from Figma UI kit 50002:1960. */
.book-button,.portfolio-button,.about-cover-button,.about-me-button,.portfolio-cover-button,.client-cover-button,.meanings-cover-button ,.cta-button img{transition:opacity .18s ease}
.footer-social{position:relative;border-radius:5px;background:rgba(206,198,193,.2);transition:background-color .18s ease}
.footer-social-instagram{background:rgba(217,217,217,.2)}
.footer-social img.social-symbol{position:absolute;width:44.230769%;height:44.230769%;left:28.846154%;top:28.846154%;object-fit:contain}
.footer-social-instagram img.social-symbol{width:57.692308%;height:57.692308%;left:30.769231%;top:11.538462%}
.social-tooltip{position:absolute;z-index:10;left:50%;bottom:calc(100% + 5px);transform:translateX(-50%);width:169px;min-height:37px;padding:5px;border-radius:5px;background:#2b2b2b;color:rgba(255,255,255,.6);font-family:"IBM Plex Sans",sans-serif;font-size:10px;font-weight:400;line-height:9px;letter-spacing:-.4px;white-space:nowrap;opacity:0;visibility:hidden;transition:opacity .18s ease,visibility .18s ease}
.social-tooltip::after{content:"";position:absolute;left:calc(50% - 4px);bottom:-5px;width:8px;height:5px;background:url("social-tooltip-pointer.svg") center/8px 5px no-repeat}
@media (hover:hover) and (pointer:fine){
 .book-button:hover,.portfolio-button:hover,.about-cover-button:hover,.about-me-button:hover,.portfolio-cover-button:hover,.client-cover-button:hover,.meanings-cover-button:hover,.cta-button:hover img{opacity:.8}
 .footer-social:hover{background:rgba(217,217,217,.25)}
 .footer-social-instagram:hover .social-tooltip{opacity:1;visibility:visible}
}
.book-button:focus-visible,.portfolio-button:focus-visible,.about-cover-button:focus-visible,.about-me-button:focus-visible,.portfolio-cover-button:focus-visible,.client-cover-button:focus-visible,.meanings-cover-button:focus-visible,.cta-button:focus-visible,.footer-social:focus-visible{outline:2px solid var(--beige,#cec6c1);outline-offset:4px}
.footer-social:focus-visible{background:rgba(217,217,217,.25)}
.footer-social-instagram:focus-visible .social-tooltip{opacity:1;visibility:visible}
@media(prefers-reduced-motion:reduce){.book-button,.portfolio-button,.about-cover-button,.about-me-button,.portfolio-cover-button,.client-cover-button,.meanings-cover-button,.cta-button img,.footer-social,.social-tooltip{transition:none}}

/* Header text hover: only the label under the pointer fades by 20%. */
.site-header a{transition:opacity .18s ease}
@media (hover:hover) and (pointer:fine){
 .site-header a:hover{opacity:.8}
}

.scroll-header-layer{position:fixed;left:0;right:0;top:0;z-index:400;background:var(--ink,#141414);transform:translateY(-100%);opacity:0;visibility:hidden;pointer-events:none;transition:transform .2s ease,opacity .2s ease,visibility .2s}
.scroll-header-layer.is-visible{transform:translateY(0);opacity:1;visibility:visible;pointer-events:auto}
.scroll-header-frame{position:absolute;top:0;left:50%;transform-origin:top center}
.scroll-header-frame .site-header{margin:0}
.menu-overlay.scroll-header-overlay{z-index:399}
@media(prefers-reduced-motion:reduce){.scroll-header-layer{transition:none}}

/* Frosted dropdown: blur the page beneath it without fading the links. */
@media(max-width:768px){
.tablet-menu{
 border-radius:0 0 20px 20px;
 background:rgba(35,35,35,.64);
 -webkit-backdrop-filter:blur(24px) saturate(140%);
 backdrop-filter:blur(24px) saturate(140%);
 border:1px solid rgba(206,198,193,.13);
 border-top:0;
 box-shadow:0 12px 28px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.06);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
.tablet-menu{background:rgba(35,35,35,.94)}
}
}