/* hrHivora V5 — customer-facing editorial refinements, semantic pictograms and more depth.
   This file intentionally overrides prior prototyping layers, without remote assets. */
.icon-library{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
.ui-icon{display:inline-block;flex:0 0 auto;width:20px;height:20px;stroke:currentColor;fill:none;vertical-align:middle;overflow:visible}
.navigation .ui-icon,.mobile-nav .ui-icon{width:20px;height:20px}
:is(.big-cta,.role-button,.close-cta,.nav-apply,.text-link){display:inline-flex;align-items:center;gap:12px;min-height:54px;line-height:1.33!important;white-space:normal}
:is(.big-cta,.role-button,.close-cta){justify-content:flex-start}
:is(.big-cta,.role-button,.close-cta) .ui-icon{width:22px;height:22px}
:is(.big-cta,.role-button,.close-cta) .btn-label{flex:1;min-width:0}
:is(.big-cta,.role-button,.close-cta) .btn-trail{width:18px;height:18px;margin-left:9px;transition:transform .35s cubic-bezier(.16,.8,.2,1)}
:is(.big-cta,.role-button,.close-cta):hover .btn-trail{transform:translateX(5px)}
:is(.big-cta,.role-button,.close-cta):focus-visible .btn-trail{transform:translateX(5px)}
.big-cta{border-radius:15px;background:linear-gradient(135deg,#6929ca,#5f20bb);box-shadow:0 15px 25px #451c843b,inset 0 2px 1px #b6a2ff55}
.role-button{padding:16px 21px;min-height:59px;border-radius:12px;white-space:nowrap;font-weight:700}
.close-cta{padding:17px 24px;background:linear-gradient(120deg,#aef28f,#91f074);border-radius:13px;box-shadow:0 11px 24px #2c076455,inset 0 2px 1px #ffffffaa;min-height:59px;width:max-content;max-width:100%}
.nav-apply{gap:9px;min-width:142px;justify-content:center;border-radius:12px;font-weight:700}
.text-link{gap:10px;line-height:1.45!important;min-height:48px}
.text-link .ui-icon:last-child{width:17px;height:17px}
:is(.nav-apply,.text-link) .ui-icon{width:18px;height:18px}
.mobile-nav a{gap:13px;justify-content:flex-start}
.mobile-nav a .ui-icon{color:#6636cf}
:is(.journey-tab,.product-tab){align-items:center;line-height:1.28!important}
:is(.journey-tab,.product-tab)>b{display:grid;place-items:center;line-height:1}
:is(.journey-tab,.product-tab)>b .ui-icon{width:22px;height:22px;opacity:.84}
.journey-tab.is-active> b .ui-icon,.product-tab.is-active> b .ui-icon{color:currentColor}
.story-control{display:inline-flex;justify-content:space-between;align-items:center;gap:11px;padding:13px 16px;font-family:inherit!important;letter-spacing:0!important;text-transform:none;min-height:50px;line-height:1.3!important}
.story-control .ui-icon{width:19px;height:19px}
.story-control-label{font-weight:700;font-size:13px;white-space:nowrap}
.story-control .btn-trail{opacity:.72}
.phone-top .pin .ui-icon{width:23px;height:23px;color:#602cbb}
.phone-choice b .ui-icon{width:20px;height:20px}
.hero-card-yellow>i .ui-icon{width:44px;height:44px}
.hero-sticker .ui-icon{width:34px;height:34px}
.belief-spark .ui-icon{width:126px;height:126px;stroke-width:1;filter:drop-shadow(0 12px 20px #5c2db844)}
.belief-under>span .ui-icon{width:70px;height:70px;stroke-width:1.3}
.role-postit>i .ui-icon{width:45px;height:45px}
.journey-explainer .ui-icon{width:52px;height:52px;stroke-width:1.3}
:is(.story-plane-top,.story-plane-bottom) .ui-icon{width:23px;height:23px;stroke-width:1.7}
.story-plane-top b,.story-plane-bottom span{line-height:1}
.depth-selector{gap:9px}
.depth-select{gap:8px;transition:background .3s,transform .33s,box-shadow .33s,border-color .3s}
.depth-select .ui-icon{width:18px;height:18px}
.depth-slab-head .ui-icon{width:23px;height:23px}
.depth-lesson .ui-icon{width:19px;height:19px}
.product-label-icon .ui-icon{width:36px;height:36px;color:#afef94}
.mockprogress .ui-icon{width:19px;height:19px}
.people-annotation .ui-icon{width:43px;height:43px}
.footer-main nav a{display:inline-flex;gap:11px;align-items:center;min-height:34px}
.footer-main nav .ui-icon{width:17px;height:17px;color:#a0efa5}
.footer-logo{letter-spacing:-.05em}
.footer-bottom{padding-bottom:5px}
.phone-footer{color:#414b3b}
.hero .hero-lede{max-width:495px}
.hero .hero-actions{max-width:630px}
.close .close-note{display:none}
.story-topline{line-height:1.6}
.story-phrase>span{font-weight:650!important;letter-spacing:.02em!important}
.product-head span{font-size:12px}
.depth-mark{line-height:1.55}
.roles-closed>p span{font-weight:650}
.person-copy{min-height:190px}
.person-copy small{display:none}
.people .person-card{isolation:isolate}
.people .person-card::after{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;pointer-events:none;box-shadow:inset 1px 1px 1px #ffffffab,inset -1px -2px 1px #264e3c22}
.people .person-card img{filter:saturate(.96) contrast(1.015);transform:scale(1.005);transition:transform .8s cubic-bezier(.16,.8,.18,1),filter .8s}
.people .person-card:hover img{transform:scale(1.055) translateY(-3px);filter:saturate(1.08)}
.person-copy blockquote{font-weight:650!important}
.honesty-rows summary{transition:padding-left .3s cubic-bezier(.18,.86,.25,1)}
.honesty-rows summary:hover{padding-left:9px}
.honesty-rows details{transition:background .3s}
.honesty-rows details[open]{background:rgba(255,255,255,.1)}
/* Real 3D, not isolated flat decoration: collage itself can rotate in depth */
.hero-collage{perspective:1120px;transform-style:preserve-3d;
 transform:rotateX(var(--hero-pitch,0deg)) rotateY(var(--hero-yaw,0deg));
 transition:transform .48s cubic-bezier(.17,.77,.2,1);will-change:transform}
.hero-phone,.hero-card-yellow,.hero-sticker{transform-style:preserve-3d;backface-visibility:hidden}
.hero-phone{transform:rotate(10deg) rotateY(-7deg) translateZ(72px);
 box-shadow:0 36px 56px #17272575,14px 18px 0 #28352c,inset 0 2px 4px #ffffffaa}
.hero-card-yellow{transform:rotate(-12deg) rotateY(6deg) translateZ(38px);box-shadow:14px 22px 0 #344f3e44,0 22px 40px #1a2f3035}
.hero-sticker{transform:rotate(-9deg) translateZ(125px);box-shadow:9px 14px 0 #573f3940,0 28px 35px #473e283d}
.graphic-blob-one{transform:rotate(-18deg) translateZ(-140px);filter:drop-shadow(20px 26px 18px #193b381d)}
.graphic-blob-two{transform:rotate(22deg) translateZ(-90px)}
.hero-ticker{transform:rotate(-4deg) translateZ(15px)}
html.motion-enabled .hero .hero-phone{animation:phone-land-v5 1.22s .43s cubic-bezier(.16,1.02,.22,1) both}
html.motion-enabled .hero .hero-card-yellow{animation:yellow-land-v5 1.28s .25s cubic-bezier(.16,1.02,.22,1) both}
html.motion-enabled .hero .hero-sticker{animation:sticker-land-v5 1.04s 1.05s cubic-bezier(.17,1.12,.28,1) both}
@keyframes phone-land-v5{from{opacity:0;transform:translate3d(120px,-110px,-190px) rotate(28deg) rotateY(36deg) scale(.7)}to{opacity:1;transform:rotate(10deg) rotateY(-7deg) translateZ(72px)}}
@keyframes yellow-land-v5{from{opacity:0;transform:translate3d(-130px,85px,-160px) rotate(-45deg) rotateY(-30deg) scale(.72)}to{opacity:1;transform:rotate(-12deg) rotateY(6deg) translateZ(38px)}}
@keyframes sticker-land-v5{from{opacity:0;transform:translate3d(-80px,80px,-190px) rotate(43deg) scale(.2)}to{opacity:1;transform:rotate(-9deg) translateZ(125px)}}
@media(hover:hover) and (pointer:fine){
 .hero-collage:hover .hero-phone{filter:drop-shadow(8px 11px 15px #244a4233)}
}
.story-plane{box-shadow:0 13px 0 #11122555,14px 25px 30px #1c153f45,inset 0 1px 2px #ffffff90;transform-style:preserve-3d}
.story-plane::after{content:"";position:absolute;top:5px;left:6px;right:6px;bottom:6px;border-radius:10px;pointer-events:none;box-shadow:inset 0 1px 0 #ffffff9d}
.journey-scene{box-shadow:12px 19px 0 #af73b04d,0 35px 60px #602a6d26}
.product-showcase{box-shadow:14px 18px 0 #8097754c,0 34px 70px #1e10553d}
.depth-experience{box-shadow:0 35px 75px #1533364a,0 4px 14px #10292833}
.depth-slab{box-shadow:0 45px 53px #0009,6px 12px 0 #0b1b1e55,inset 1px 1px 1px #ffffff8a}
.depth-view::before{opacity:.98}
.depth-floor{filter:blur(28px)}
.depth-experience .depth-slab-body strong{overflow-wrap:normal}
.depth-experience .depth-slab-foot{font-size:10px!important}
.contact-visual{position:absolute;z-index:1;right:-1%;top:12%;width:53%;height:80%;perspective:1150px;transform-style:preserve-3d;pointer-events:none;
 transform:rotateX(var(--contact-rx,-5deg)) rotateY(var(--contact-ry,8deg));transition:transform .56s cubic-bezier(.18,.73,.2,1)}
.contact-visual::before{content:"";position:absolute;inset:6% 0 0 8%;border-radius:50%;
 background:radial-gradient(circle at 50% 47%,#bbc1f8c2 0%,#c19cfa6a 12%,#9260e476 35%,transparent 67%);
 filter:blur(26px)}
.contact-visual::after{content:"";position:absolute;left:30%;top:35%;width:53%;height:56%;border-radius:50%;background:#2f08566c;filter:blur(55px);transform:translateY(33%);z-index:-1}
.contact-orbit{position:absolute;left:14%;top:8%;height:85%;width:83%;border:2px solid #d1f7c478;border-radius:50%;transform:rotateX(61deg) rotateZ(42deg);box-shadow:0 0 22px #d1f2cc77,inset 0 0 22px #d4f0ee37}
.orbit-b{width:70%;height:80%;top:14%;left:24%;transform:rotateX(67deg) rotateZ(-36deg);border-color:#ece2f383}
.contact-float{position:absolute;display:flex;align-items:center;gap:12px;padding:16px 18px;min-height:85px;background:linear-gradient(133deg,#f2f9eeeb,#dff1e0d8);
 border:1px solid #ffffffbe;color:#1c333b;border-radius:18px;box-shadow:0 20px 35px #2b055159,inset 0 2px 2px #fff;backdrop-filter:blur(15px);
 font-size:14px;line-height:1.38;font-weight:600;transform-style:preserve-3d}
.contact-float .ui-icon{width:34px;height:34px;color:#5a24c0}
.contact-float span{display:block}.contact-float strong{display:block;font-size:19px;line-height:1.15;margin-top:4px}
.contact-float-a{top:4%;left:12%;width:255px;transform:rotate(-8deg) rotateY(10deg) translateZ(140px);animation:contact-float-a 6s ease-in-out infinite alternate}
.contact-float-b{top:56%;right:2%;width:235px;background:linear-gradient(140deg,#9de98fe0,#b7e2cfdd);transform:rotate(7deg) rotateY(-12deg) translateZ(210px);animation:contact-float-b 6.8s ease-in-out infinite alternate}
.contact-float-c{top:70%;left:2%;width:220px;min-height:72px;background:linear-gradient(110deg,#fbf8c6e7,#f6d9f1ef);transform:rotate(-9deg) translateZ(95px);animation:contact-float-c 7s ease-in-out infinite alternate}
.contact-core{position:absolute;top:33%;left:38%;width:172px;height:172px;display:grid;place-items:center;border-radius:31px;
 background:linear-gradient(140deg,#b6c0ff,#634bff 47%,#4b23db 100%);border:1px solid #ffffffaa;transform:rotate(-8deg) rotateY(20deg) translateZ(70px);
 box-shadow:inset 6px 8px 15px #d2deff85,inset -12px -13px 22px #5807b45e,15px 25px 25px #34046c85,0 0 70px #9e9fff88}
.contact-core .ui-icon{width:100px;height:100px;color:white;stroke-width:1.7;filter:drop-shadow(0 7px 6px #3918c066)}
@keyframes contact-float-a{to{transform:rotate(-5deg) rotateY(15deg) translate3d(0,-17px,164px)}}
@keyframes contact-float-b{to{transform:rotate(3deg) rotateY(-7deg) translate3d(0,-22px,227px)}}
@keyframes contact-float-c{to{transform:rotate(-6deg) translate3d(7px,-14px,119px)}}
.close{min-height:730px}
.close-copy{max-width:780px;width:61%}
.close-copy .close-cta{margin-top:24px}
.close-decor{opacity:.22;right:-19%;filter:blur(2px)}
.close-copy p{max-width:470px}
.close .close-cta .ui-icon{color:#5a23a3}
.footer-main nav a{white-space:nowrap}
@media(max-width:1180px){
 .contact-visual{right:-5%;width:50%}
 .close-copy{width:62%}
 .contact-core{left:28%}
 .contact-float-a{left:0}
 .contact-float-c{left:-15%}
}
@media(max-width:900px){
 .contact-visual{opacity:.9;right:-11%;width:57%}
 .contact-float{scale:.85}
 .contact-core{scale:.86}
 .close-copy{width:66%}
 .hero-collage{perspective:1000px}
}
@media(max-width:700px){
 .navigation{height:70px}
 .mobile-nav:not([hidden]){top:70px}
 .hero-collage{perspective:900px}
 .hero-card-yellow,.hero-phone,.hero-sticker{backface-visibility:visible}
 .hero .big-cta{width:100%;min-height:59px}
 .hero .big-cta .btn-label{flex:1;text-align:left}
 .hero .text-link{align-self:start}
 .story-control{gap:6px;min-height:48px}
 .story-control .ui-icon:first-child{display:none}
 .story-control-label{font-size:12px!important}
 .story-control .btn-trail{width:17px;height:17px}
 .story-topline{font-size:10px}
 .role-button{grid-column:1/3;gap:12px;width:100%;white-space:normal;min-height:61px}
 .role-button .btn-label{flex:1}
 .journey-tab> b .ui-icon,.product-tab>b .ui-icon{width:18px;height:18px}
 .journey-explainer .ui-icon{width:36px;height:36px}
 .hero-sticker .ui-icon{width:25px;height:25px}
 .belief-spark .ui-icon{width:56px;height:56px}
 .belief-under>span .ui-icon{width:40px;height:40px}
 .role-postit>i .ui-icon{width:31px;height:31px}
 .people-annotation .ui-icon{width:29px;height:29px}
 .person-copy{min-height:150px}
 .contact-visual{position:relative;top:auto;right:auto;width:100%;height:380px;min-height:380px;margin:16px auto 0;transform:rotateX(var(--contact-rx,-5deg)) rotateY(var(--contact-ry,8deg));opacity:1}
 .close{padding-bottom:45px;min-height:auto}
 .close-copy{width:100%;max-width:none}
 .close-copy h2{max-width:660px}
 .close-copy .close-cta{width:100%;font-size:14px!important}
 .close .close-cta .btn-label{flex:1}
 .contact-core{top:26%;left:34%;width:140px;height:140px;scale:1}
 .contact-core .ui-icon{width:83px;height:83px}
 .contact-float{scale:.78;padding:13px 14px}
 .contact-float-a{top:2%;left:-7%}
 .contact-float-b{top:64%;right:-13%}
 .contact-float-c{top:70%;left:-8%}
 .close-decor{bottom:0;height:45%;width:80%}
 .footer-main nav a{min-height:44px}
}
@media(max-width:390px){
 .contact-visual{height:325px;min-height:325px}
 .contact-core{left:29%;top:28%;width:126px;height:126px}
 .contact-core .ui-icon{width:74px;height:74px}
 .contact-float-a{left:-18%;top:0}
 .contact-float-b{right:-20%;top:63%}
 .contact-float-c{left:-21%;top:68%}
 .contact-float{scale:.67}
 .depth-selector .depth-select .ui-icon{width:16px;height:16px}
 .depth-select{font-size:12px!important;gap:5px;padding-inline:6px}
}
@media(prefers-reduced-motion:reduce){
 .hero-collage{transform:none!important;transition:none!important}
 .contact-visual{transform:none!important;transition:none!important}
 .contact-float,.contact-core{animation:none!important}
 .people .person-card img{transition:none!important}
}
/* Final CTA optical size: labels and icons never inherit oversized old spans. */
html body .big-cta .btn-label,html body .role-button .btn-label,html body .close-cta .btn-label{
 font-family:var(--typeface,"Ubuntu Sans",sans-serif)!important;
 font-size:15px!important;font-weight:700!important;line-height:1.35!important;
 letter-spacing:-.01em!important;
}
html body .big-cta .btn-trail,html body .role-button .btn-trail,html body .close-cta .btn-trail{font-size:inherit!important}
/* Ensure free-floating contact surfaces stay inside the desktop composition. */
@media(min-width:901px){
 .contact-visual{width:45%;right:2%}
 .contact-core{left:36%}
 .contact-float-a{left:4%;width:230px}
 .contact-float-b{right:0;width:210px}
 .contact-float-c{left:3%;width:205px}
}
/* Content first, optional 3D decoration second for touch devices. */
@media(max-width:700px){
 .close{display:flex;flex-direction:column;align-items:stretch}
 .close-copy{order:0}
 .contact-visual{order:1}
 .close-decor{order:-1}
 html body .big-cta .btn-label,html body .role-button .btn-label,html body .close-cta .btn-label{font-size:14px!important}
 .hero .big-cta .btn-label{white-space:normal}
}
@media(max-width:360px){
 .depth-selector .depth-select .ui-icon{display:none}
 .depth-selector .depth-select{font-size:12px!important;min-height:48px}
 .contact-float{scale:.63}
}
/* A collapsed mobile menu must replace, not accompany, the desktop CTA. */
@media(max-width:1000px){.navigation .nav-apply{display:none!important}}
/* Make decorative pictograms deliberate instead of a universal arrow. */
.scene-art-1>i .ui-icon{width:100px;height:100px;stroke-width:1.4}
.depth-form-line b .ui-icon{width:13px;height:13px;color:#2e7476}
@media(min-width:901px){.contact-float-b{right:14%;width:205px}}
@media(max-width:700px){
 .contact-float-b{right:0;width:194px}
 .contact-float-c{left:1%;width:190px}
}
@media(max-width:390px){
 .contact-float-b{right:-2%;width:184px}
 .contact-float-c{left:1%;width:184px}
 .scene-art-1>i .ui-icon{width:65px;height:65px}
}