.hf-family{--red: #df0014; --ink: #111416; --cream: #f7f5f0; --muted: #c4c7cc; --header: #faf9f6; --header-ink: #202326; color-scheme: light;}
.hf-family *{box-sizing: border-box;}
.hf-family{margin: 0px; font-family: Lexend, Arial, sans-serif; background: var(--header); color: var(--header-ink);}
.hf-family a{color: inherit; text-decoration: none;}
.hf-family button{font: inherit; cursor: pointer;}
.hf-family svg{width: 24px; height: 24px; stroke: currentcolor; stroke-width: 1.7; flex: 0 0 auto;}
.hf-family img{max-width: 100%; display: block;}
.hf-family button,.hf-family  a{-webkit-tap-highlight-color: transparent;}
.hf-family a:focus-visible,.hf-family  button:focus-visible{outline: 3px solid var(--red); outline-offset: 5px;}
.hf-family .hf-wrap{width: calc(100% - 112px); max-width: 1504px; margin: auto;}
.hf-family .hf-site-header{height: 104px; background: var(--header); border-bottom: 1px solid rgba(133, 133, 133, 0.15);}
.hf-family .hf-header-inner{display: flex; align-items: center; gap: 40px; height: 100%;}
.hf-family .hf-logo{width: 364px; flex: 0 0 auto;}
.hf-family .hf-logo img{width: 100%; height: 66px; object-fit: contain;}
.hf-family .hf-logo-dark{display: none;}
.hf-family .hf-site-header nav{display: flex; align-items: center; gap: 34px; margin-left: auto; font-weight: 600; font-size: 18px; white-space: nowrap;}
.hf-family .hf-site-header nav a.hf-active{color: rgb(212, 0, 17);}
.hf-family .hf-down{display: inline-block; margin-left: 12px; font-size: 21px;}
.hf-family .hf-controls{display: flex; align-items: center; gap: 20px;}
.hf-family .hf-language{font-size: 15px; font-weight: 700;}
.hf-family .hf-theme-toggle,.hf-family  .hf-menu-toggle{width: 52px; height: 52px; border: 1px solid rgba(151, 151, 151, 0.27); border-radius: 12px; background: none; color: inherit; display: grid; place-content: center;}
.hf-family .hf-theme-toggle span{width: 23px; height: 23px; border: 2px solid; border-radius: 50%; background: linear-gradient(90deg, currentcolor 50%, transparent 50%);}
.hf-family .hf-contact{display: flex; align-items: center; gap: 20px; background: var(--red); color: white; padding: 19px 25px; border-radius: 40px; font-size: 16px; font-weight: 650;}
.hf-family .hf-menu-toggle{display: none;}
.hf-family.hf-hero{color: var(--cream); background: rgb(14, 17, 19);}
.hf-family .hf-hero-stage{height: 760px; position: relative; isolation: isolate; overflow: hidden;}
.hf-family .hf-scene-background{position: absolute; inset: 0px; z-index: -3; background: radial-gradient(at 80% 68%, rgba(81, 7, 19, 0.46), transparent 55%), linear-gradient(115deg, rgb(12, 16, 18) 30%, rgb(23, 19, 23) 100%);}
.hf-family .hf-scene-background::after{content: ""; position: absolute; inset: 0px; background-image: linear-gradient(163deg, transparent 49.9%, rgba(179, 181, 188, 0.02) 50%, transparent 50.1%); background-size: 580px 290px; opacity: 0.8;}
.hf-family .hf-trails{position: absolute; inset: 0px; width: 100%; height: 100%; z-index: -1; pointer-events: none; stroke: none;}
.hf-family .hf-trails > path{fill: none; stroke: rgb(206, 16, 45); stroke-width: 0.8; opacity: 0.22;}
.hf-family .hf-back-word{position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%); width: max-content; max-width: 100%; font-size: clamp(100px, 12.2vw, 205px); letter-spacing: -0.06em; font-weight: 750; line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(185, 140, 146, 0.125); z-index: -2; user-select: none; pointer-events: none;}
.hf-family .hf-hero-inner{height: 100%; position: relative;}
.hf-family .hf-breadcrumb{position: absolute; top: 32px; left: 0px; font-size: 14px; color: rgb(196, 199, 204); display: flex; gap: 19px; align-items: center; z-index: 5;}
.hf-family.hf-hero-home .hf-breadcrumb{visibility: hidden;}
.hf-family .hf-hero-copy{position: absolute; top: 50%; left: 0px; width: 44%; transform: translateY(-46%); z-index: 4; pointer-events: none;}
.hf-family .hf-hero-copy a{pointer-events: auto;}
.hf-family .hf-eyebrow{display: flex; align-items: center; gap: 16px; font-size: 13px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; margin: 0px 0px 30px; color: rgb(248, 247, 244); max-width: 97%; line-height: 1.6;}
.hf-family .hf-eyebrow::before{content: ""; height: 3px; width: 32px; flex: 0 0 auto; background: var(--red);}
.hf-family h1{font-size: clamp(48px, 3.75vw, 63px); line-height: 1.08; letter-spacing: -0.045em; font-weight: 700; margin: 0px 0px 30px;}
.hf-family h1 em{font-style: normal; color: rgb(238, 0, 27);}
.hf-family.hf-hero-home h1 em{color: var(--cream);}
.hf-family .hf-intro{font-size: 20px; line-height: 1.8; font-weight: 350; color: rgb(204, 208, 214); max-width: 590px; margin: 0px 0px 34px;}
.hf-family .hf-actions{display: flex; align-items: center; gap: 25px;}
.hf-family .hf-primary{display: inline-flex; align-items: center; justify-content: center; gap: 22px; background: rgb(217, 0, 18); border-radius: 6px; padding: 21px 25px; font-size: 17px; font-weight: 650; min-height: 64px; white-space: nowrap;}
.hf-family .hf-secondary{display: inline-flex; align-items: center; gap: 14px; font-size: 15px; font-weight: 650;}
.hf-family .hf-secondary svg{width: 20px;}
.hf-family .hf-visual{position: absolute; right: 0px; top: 112px; width: 49.2%; height: 567px; z-index: 2;}
.hf-family .hf-scene-rail{height: 58px; border: 1px solid rgba(85, 90, 99, 0.667); border-radius: 10px; background: rgb(25, 29, 34); display: flex; align-items: center; justify-content: space-between; padding: 0px 20px; gap: 20px; position: relative; z-index: 9; color: rgb(247, 245, 240); font-size: 13px; font-weight: 500;}
.hf-family .hf-scene-rail > span:first-child{display: flex; align-items: center; gap: 10px; text-transform: uppercase; font-size: 12px; letter-spacing: 0.12em; font-weight: 650; white-space: nowrap;}
.hf-family .hf-scene-rail > span:last-child{text-align: right;}
.hf-family .hf-scene-rail i{width: 9px; height: 9px; border-radius: 100%; background: var(--red); flex: 0 0 auto;}
.hf-family .hf-art{position: relative; height: 490px; margin-top: 20px;}
.hf-family .hf-baseline{height: 104px; background: rgb(23, 27, 31); position: relative; z-index: 10; border-top: 1px solid rgba(121, 125, 135, 0.14);}
.hf-family .hf-baseline-inner{display: flex; align-items: center; justify-content: space-between; gap: 60px; height: 100%; font-size: 17px;}
.hf-family .hf-baseline-inner > strong{font-weight: 550; max-width: 60%; line-height: 1.5;}
.hf-family .hf-baseline-inner > div{display: flex; gap: 25px; color: rgb(200, 204, 210);}
.hf-family .hf-baseline-inner > div > span{white-space: nowrap; position: relative;}
.hf-family .hf-baseline-inner > div > span + span::before{content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--red); position: absolute; top: 10px; left: -14px;}
.hf-family .hf-review-nav{padding: 28px 56px; display: flex; align-items: center; justify-content: space-between; font-size: 14px;}
.hf-family .hf-review-nav a{font-weight: 600;}
.hf-family .hf-review-nav span{opacity: 0.65;}
.hf-family body[data-capture] .hf-review-nav{display: none;}
.hf-family .home-scene{height: 100%; position: relative;}
.hf-family .home-art{position: absolute; width: 1220px; max-width: none; height: 650px; object-fit: cover; top: -33px; right: -105px; mask-image: linear-gradient(90deg, transparent, rgb(0, 0, 0) 28%, rgb(0, 0, 0) 91%, transparent);}
.hf-family.hf-hero-home .hf-scene-background{background: rgb(11, 16, 18);}
.hf-family.hf-hero-home .hf-visual{z-index: 1;}
.hf-family.hf-hero-home .hf-art{overflow: visible;}
.hf-family.hf-hero-home .hf-back-word{z-index: 3; opacity: 0.45;}
.hf-family.hf-hero-home .hf-trails{z-index: 2; opacity: 0.5;}
.hf-family.hf-hero-home .hf-hero-copy{width: 43%;}
.hf-family .service-network{height: 100%; position: relative; max-width: 680px; margin: auto;}
.hf-family .network-ring{position: absolute; border: 1px solid rgba(163, 29, 46, 0.4); border-radius: 50%; left: 50%; top: 47%; transform: translate(-50%, -50%); width: 510px; height: 395px; rotate: -22deg;}
.hf-family .network-ring.r2{width: 390px; height: 470px; rotate: 39deg; border-color: rgba(206, 203, 211, 0.1);}
.hf-family .network-core{position: absolute; left: 50%; top: 47%; transform: translate(-50%, -50%); width: 165px; height: 165px; border-radius: 50%; background: radial-gradient(rgb(88, 16, 30), rgb(23, 25, 30) 65%); border: 1px solid rgba(213, 39, 58, 0.533); display: flex; align-items: center; justify-content: center; gap: 15px; flex-direction: column; box-shadow: rgba(213, 0, 24, 0.082) 0px 0px 90px;}
.hf-family .network-core img{width: 68px; height: 68px;}
.hf-family .network-core span{font-size: 15px;}
.hf-family .network-item{position: absolute; border: 1px solid rgba(87, 91, 99, 0.44); background: linear-gradient(120deg, rgb(34, 38, 43), rgb(24, 27, 32)); border-radius: 10px; display: flex; align-items: center; gap: 16px; padding: 25px; width: 190px; box-shadow: rgba(0, 0, 0, 0.2) 0px 18px 40px; font-weight: 600; font-size: 19px; z-index: 2;}
.hf-family .network-item svg{color: rgb(238, 0, 27); width: 28px; height: 28px;}
.hf-family .n0{left: 8%; top: 4%;}
.hf-family .n1{right: 0px; top: 13%;}
.hf-family .n2{right: 1%; top: 50%;}
.hf-family .n3{right: 23%; bottom: 1%;}
.hf-family .n4{left: 2%; bottom: 7%;}
.hf-family .n5{left: -4%; top: 38%;}
.hf-family .network-connection{position: absolute; inset: 25% 7%; border-top: 1px solid rgba(173, 27, 50, 0.314); border-bottom: 1px solid rgba(173, 27, 50, 0.314); transform: rotate(-34deg);}
.hf-family .brand-scene{height: 100%; position: relative;}
.hf-family .brand-art{width: 1370px; height: 585px; max-width: none; object-fit: cover; position: absolute; right: -118px; top: -60px; mask-image: linear-gradient(90deg, transparent, rgb(0, 0, 0) 42%, rgb(0, 0, 0) 86%, transparent);}
.hf-family .palette{position: absolute; right: 5px; bottom: 8px; display: flex; gap: 9px; flex-wrap: wrap; align-items: center; padding: 20px 23px; width: 290px; border: 1px solid rgb(74, 75, 80); border-radius: 9px; background: rgb(25, 28, 33); box-shadow: rgba(0, 0, 0, 0.333) 0px 15px 35px;}
.hf-family .palette b{font-size: 44px; margin-right: auto; letter-spacing: -0.06em; line-height: 1;}
.hf-family .swatch{height: 35px; width: 28px; border-radius: 3px;}
.hf-family .swatch.red{background: rgb(223, 0, 20);}
.hf-family .swatch.cream{background: rgb(240, 236, 227);}
.hf-family .swatch.grey{background: rgb(104, 105, 115);}
.hf-family .palette small{width: 100%; font-size: 13px; margin-top: 5px; color: rgb(190, 195, 204);}
.hf-family .web-scene{height: 100%; padding: 5px 38px 0px 17px; position: relative;}
.hf-family .project-screen{border: 1px solid rgba(101, 102, 107, 0.565); background: rgb(241, 238, 231); border-radius: 10px; overflow: hidden; box-shadow: rgba(0, 0, 0, 0.4) 0px 24px 55px;}
.hf-family .project-image{width: 100%; aspect-ratio: 16 / 9; object-fit: contain; padding: 18px;}
.hf-family .project-caption{padding: 20px 24px; background: rgb(27, 31, 36); display: flex; align-items: center; justify-content: space-between; gap: 15px;}
.hf-family .project-caption small{font-size: 12px; color: rgb(196, 200, 205); display: block; margin-bottom: 7px;}
.hf-family .project-caption strong{font-size: 25px; letter-spacing: -0.035em;}
.hf-family .project-caption svg{color: rgb(233, 0, 26);}
.hf-family .web-scene .project-screen{transform: perspective(1200px) rotateY(-4deg); transform-origin: left center;}
.hf-family .mini-screen{position: absolute; width: 40%; right: -8px; bottom: 0px; border: 8px solid rgb(242, 239, 233); border-radius: 7px; background: rgb(242, 239, 233); box-shadow: rgba(0, 0, 0, 0.533) 0px 12px 45px; transform: rotate(3deg);}
.hf-family .mini-screen img{width: 100%; aspect-ratio: 16 / 9; object-fit: contain;}
.hf-family .mini-screen span{color: rgb(37, 40, 45); font-size: 12px; display: block; padding: 9px 4px 3px; font-weight: 600;}
.hf-family .side-index{display: flex; gap: 16px; align-items: center; color: rgb(200, 203, 210); position: absolute; left: 28px; bottom: 27px; font-size: 12px;}
.hf-family .side-index b{background: var(--red); border-radius: 50%; padding: 10px; color: white;}
.hf-family .hf-apps-scene{height: 100%; position: relative;}
.hf-family .hf-cube{width: 570px; max-height: 480px; object-fit: contain; position: absolute; left: 50%; transform: translateX(-50%); top: -35px; filter: drop-shadow(rgba(0, 0, 0, 0.467) 0px 20px 30px);}
.hf-family .hf-cube-aura{position: absolute; inset: 15% 20%; border-radius: 50%; background: radial-gradient(rgba(165, 27, 36, 0.4), transparent 70%); filter: blur(28px);}
.hf-family .chips{display: flex; justify-content: center; gap: 12px;}
.hf-family .chips > span{border: 1px solid rgb(87, 91, 99); border-radius: 8px; background: rgb(25, 29, 34); padding: 16px 22px; font-size: 15px; display: flex; align-items: center; gap: 12px;}
.hf-family .chips b{background: var(--red); width: 7px; height: 7px; border-radius: 50%;}
.hf-family .platforms{position: absolute; bottom: 5px; left: 0px; right: 0px;}
.hf-family .ai-scene{height: 100%; position: relative;}
.hf-family .ai-art{position: absolute; top: -23px; right: -200px; width: 1410px; height: 610px; max-width: none; object-fit: cover; mask-image: linear-gradient(90deg, transparent, rgb(0, 0, 0) 38%, rgb(0, 0, 0) 88%, transparent); opacity: 0.85;}
.hf-family.hf-hero-ai .hf-trails{opacity: 0.7;}
.hf-family .ai-node{position: absolute; z-index: 2; background: rgba(23, 27, 32, 0.91); border: 1px solid rgba(91, 91, 99, 0.6); border-radius: 9px; padding: 20px; display: flex; align-items: center; gap: 12px; font-size: 15px;}
.hf-family .ai-node svg{color: rgb(246, 0, 35);}
.hf-family .ai-node.source{top: 57px; left: 15px;}
.hf-family .ai-node.target{top: 220px; right: 0px;}
.hf-family .ai-callout{position: absolute; bottom: 20px; left: 15px; right: 0px; background: rgb(25, 29, 34); border: 1px solid rgba(89, 89, 97, 0.627); border-radius: 9px; padding: 23px 25px; font-size: 18px; display: flex; align-items: center; gap: 14px;}
.hf-family .live-dot{width: 9px; height: 9px; border-radius: 50%; background: var(--red); box-shadow: rgba(231, 0, 24, 0.098) 0px 0px 0px 7px;}
.hf-family .learn-scene{height: 100%; position: relative;}
.hf-family .learn-photo{position: absolute; inset: 0px 0px 136px; border-radius: 10px; overflow: hidden; border: 1px solid rgba(106, 98, 101, 0.5);}
.hf-family .learn-photo img{height: 100%; width: 100%; object-fit: cover;}
.hf-family .learn-steps{position: absolute; bottom: 0px; left: 24px; right: 0px; display: grid; gap: 8px;}
.hf-family .learn-steps > div{display: flex; align-items: center; gap: 14px; background: rgb(27, 31, 36); border: 1px solid rgb(86, 91, 100); border-radius: 7px; padding: 15px 20px; font-size: 14px;}
.hf-family .learn-steps > div:nth-child(1){margin-right: 48px;}
.hf-family .learn-steps > div:nth-child(2){margin-left: 24px; margin-right: 24px;}
.hf-family .learn-steps > div:nth-child(3){margin-left: 48px;}
.hf-family .learn-steps b{font-size: 11px; color: rgb(201, 203, 210); background: rgb(55, 60, 68); width: 25px; height: 25px; border-radius: 50%; display: grid; place-items: center;}
.hf-family .learn-steps svg{width: 18px; margin-left: auto; color: var(--red);}
.hf-family .learn-steps .current{background: rgb(59, 26, 35); border-color: rgb(224, 0, 34);}
.hf-family .learn-steps .current b{background: rgb(224, 0, 24); color: white;}
.hf-family .content-scene{height: 100%; position: relative; perspective: 1200px;}
.hf-family .editorial-back{position: absolute; inset: 30px 115px 12px 21px; background: rgb(162, 0, 22); border-radius: 6px; transform: rotate(-6deg); border: 1px solid rgb(239, 34, 61);}
.hf-family .editorial-back span{font-size: 11px; position: absolute; bottom: 18px; left: 25px; letter-spacing: 0.1em;}
.hf-family .editorial-paper{position: absolute; inset: 5px 118px 40px 40px; background: rgb(241, 238, 230); color: rgb(36, 38, 42); padding: 30px 32px; border-radius: 4px; transform: rotate(-1.5deg); box-shadow: rgba(0, 0, 0, 0.333) 0px 25px 55px;}
.hf-family .editorial-paper small{font-size: 12px;}
.hf-family .editorial-paper h2{font-size: 66px; line-height: 1.05; letter-spacing: -0.05em; font-weight: 700; margin: 28px 0px 22px;}
.hf-family .editorial-paper h2 em{color: var(--red); font-style: normal;}
.hf-family .copy-lines{width: 60%; display: grid; gap: 7px;}
.hf-family .copy-lines i{display: block; height: 3px; background: rgb(180, 179, 175);}
.hf-family .copy-lines i:nth-child(2){width: 80%;}
.hf-family .copy-lines i:nth-child(3){width: 57%;}
.hf-family .editorial-picture{position: absolute; right: -2px; bottom: 8px; width: 54%; border: 9px solid rgb(32, 37, 43); border-radius: 4px; background: rgb(32, 37, 43); transform: rotate(3deg); box-shadow: rgba(0, 0, 0, 0.533) 0px 15px 35px;}
.hf-family .editorial-picture img{aspect-ratio: 1.6 / 1; object-fit: cover;}
.hf-family .editorial-picture span{padding: 13px 5px 5px; display: flex; justify-content: space-between; align-items: center; font-size: 12px;}
.hf-family .editorial-picture svg{width: 17px; color: var(--red);}
.hf-family .editorial-mark{position: absolute; right: 17px; top: 30px; writing-mode: vertical-rl; font-size: 11px; letter-spacing: 0.2em; color: rgb(210, 185, 190);}
.hf-family .offer-scene{height: 100%; position: relative; padding: 15px 35px 0px 2px;}
.hf-family .offer-window{background: rgb(246, 244, 238); color: rgb(35, 39, 43); border: 1px solid rgb(169, 166, 162); border-radius: 8px; overflow: hidden; transform: perspective(1400px) rotateY(-6deg) rotateZ(-1deg); box-shadow: rgba(0, 0, 0, 0.533) 0px 25px 60px;}
.hf-family .offer-nav{display: flex; justify-content: space-between; align-items: center; padding: 20px 23px; font-size: 13px; background: rgb(255, 255, 255);}
.hf-family .offer-nav span{color: rgb(206, 0, 20); letter-spacing: 4px;}
.hf-family .offer-design{height: 237px; background: rgb(36, 44, 47); position: relative; overflow: hidden; padding: 28px; color: rgb(246, 244, 238);}
.hf-family .offer-design > small{font-size: 9px; letter-spacing: 0.12em; position: relative; z-index: 2;}
.hf-family .offer-design > strong{font-size: 35px; line-height: 1.1; letter-spacing: -0.04em; display: block; margin: 18px 0px; position: relative; z-index: 2;}
.hf-family .tiny-cta{font-size: 9px; background: rgb(217, 0, 18); padding: 11px 14px; display: inline-block; position: relative; z-index: 2;}
.hf-family .offer-dot{position: absolute; width: 180px; height: 180px; border-radius: 50%; right: 33px; top: 24px; background: radial-gradient(circle at 35% 35%, rgb(255, 63, 79), rgb(192, 0, 25) 75%); box-shadow: rgba(0, 0, 0, 0.267) 0px 15px 35px;}
.hf-family .offer-arch{position: absolute; width: 170px; height: 260px; border: 24px solid rgb(233, 228, 217); border-radius: 110px 110px 0px 0px; right: -23px; bottom: -160px; transform: rotate(-25deg);}
.hf-family .offer-bottom{padding: 18px; display: flex; gap: 10px;}
.hf-family .offer-bottom > span{padding: 15px 12px; background: white; border: 1px solid rgb(222, 219, 211); flex: 1 1 0%;}
.hf-family .offer-bottom small{color: rgb(213, 0, 18); font-size: 9px; display: block; margin-bottom: 12px;}
.hf-family .offer-bottom b{font-size: 10px; display: block; margin-bottom: 10px;}
.hf-family .offer-bottom i{height: 3px; background: rgb(221, 217, 209); width: 100%; display: block;}
.hf-family .price{position: absolute; right: -5px; bottom: 0px; background: rgb(26, 30, 35); border-width: 1px 1px 1px 4px; border-style: solid; border-color: rgb(224, 0, 32); border-image: none; padding: 20px 27px; border-radius: 9px; width: 295px; box-shadow: rgba(0, 0, 0, 0.4) 0px 15px 45px;}
.hf-family .price > span{font-size: 13px; color: rgb(217, 221, 225);}
.hf-family .price > div{display: flex; align-items: baseline; gap: 8px; margin-top: 10px;}
.hf-family .price strong{font-size: 66px; line-height: 1; letter-spacing: -0.06em;}
.hf-family .price b{font-size: 35px; color: var(--red);}
.hf-family .price small{font-size: 15px;}
.hf-family .price p{font-size: 11px; color: rgb(194, 198, 204); margin: 8px 0px 0px;}
.hf-family .build-guides{position: absolute; inset: 0px; border: 1px solid rgba(162, 22, 39, 0.267); transform: rotate(5deg);}
.hf-family .work-scene{height: 100%;}
.hf-family .work-scene .project-image{aspect-ratio: 2.05 / 1; padding: 19px 26px;}
.hf-family .work-scene .project-caption{padding: 17px 24px;}
.hf-family .work-tabs{display: flex; gap: 12px; margin-top: 17px;}
.hf-family .work-tabs > span{display: flex; align-items: center; gap: 9px; flex: 1 1 0%; padding: 20px 12px; border: 1px solid rgb(83, 90, 99); border-radius: 8px; background: rgb(25, 29, 34); font-size: 10px; white-space: nowrap;}
.hf-family .work-tabs b{font-size: 13px;}
.hf-family .work-tabs .selected{border-color: rgb(234, 0, 29); background: rgb(54, 26, 35); box-shadow: rgb(230, 0, 27) 0px -3px inset;}
.hf-family .agency-scene{height: 100%; position: relative;}
.hf-family .hf-agency-orbit{width: 620px; max-width: none; height: 570px; object-fit: contain; position: absolute; left: 50%; top: -42px; transform: translateX(-50%); mask-image: radial-gradient(rgb(0, 0, 0) 48%, transparent 74%);}
.hf-family .hf-agency-az{position: absolute; width: 122px; height: 122px; left: 50%; top: 160px; transform: translateX(-50%); filter: drop-shadow(rgba(205, 0, 24, 0.25) 0px 0px 25px);}
.hf-family .agency-person{position: absolute; bottom: 0px; right: 6px; width: 400px; border: 1px solid rgb(102, 96, 104); background: rgb(26, 30, 35); border-radius: 10px; padding: 19px; display: flex; align-items: center; gap: 16px; box-shadow: rgba(0, 0, 0, 0.467) 0px 17px 40px;}
.hf-family .agency-person img{width: 65px; height: 65px; object-fit: cover; border-radius: 50%;}
.hf-family .agency-person div{display: grid; gap: 5px;}
.hf-family .agency-person small{font-size: 11px; color: rgb(201, 201, 206);}
.hf-family .agency-person strong{font-size: 20px;}
.hf-family .agency-person span{font-size: 11px; color: rgb(201, 201, 206);}
.hf-family .agency-person svg{color: var(--red); margin-left: auto;}
.hf-family.hf-hero-journal .hf-scene-background{background-image: linear-gradient(90deg, rgb(11, 16, 18) 28%, rgba(11, 16, 18, 0.65) 50%, rgba(11, 16, 18, 0.22)), url("./journal-flow-1440.webp"); background-size: cover; background-position: center center; opacity: 0.8;}
.hf-family .journal-scene{height: 100%;}
.hf-family .journal-card{border: 1px solid rgb(183, 177, 170); border-radius: 9px; overflow: hidden; background: rgb(242, 239, 232); color: rgb(32, 35, 39); box-shadow: rgba(0, 0, 0, 0.333) 0px 20px 50px;}
.hf-family .journal-card > img{height: 235px; width: 100%; object-fit: cover;}
.hf-family .hf-journal-copy{padding: 22px 27px;}
.hf-family .hf-journal-copy > div{display: flex; justify-content: space-between; gap: 18px; font-size: 11px; color: rgb(85, 93, 103);}
.hf-family .hf-journal-copy > div > span{color: rgb(207, 0, 20); font-weight: 600;}
.hf-family .hf-journal-copy h2{font-size: 26px; line-height: 1.25; letter-spacing: -0.035em; margin: 18px 0px;}
.hf-family .hf-read-more{display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 650; color: rgb(214, 0, 22);}
.hf-family .journal-index{display: flex; align-items: center; gap: 14px; padding: 16px 20px; margin-top: 14px; background: rgb(25, 29, 34); border: 1px solid rgb(85, 91, 100); border-radius: 8px; font-size: 12px;}
.hf-family .journal-index b{border-radius: 50%; background: rgb(217, 0, 21); width: 30px; height: 30px; display: grid; place-items: center; font-size: 11px;}
.hf-family .journal-index i{height: 3px; flex: 1 1 0%; margin-left: 10px; background: linear-gradient(90deg, rgb(232, 0, 27) 33%, rgb(81, 86, 94) 33%);}
.hf-family .legal-scene{position: relative; height: 100%;}
.hf-family .identity-paper{position: absolute; inset: 4px 70px 40px 58px; border-radius: 5px; background: rgb(236, 231, 221); color: rgb(37, 40, 45); padding: 28px 38px; transform: rotate(-3deg); box-shadow: rgba(0, 0, 0, 0.533) 0px 25px 55px;}
.hf-family .identity-paper > small{font-size: 10px; letter-spacing: 0.13em; color: rgb(92, 99, 107);}
.hf-family .identity-az{width: 69px; height: 69px; margin: 27px 0px 18px;}
.hf-family .identity-paper h2{font-size: 43px; line-height: 1.03; letter-spacing: -0.045em; margin: 0px;}
.hf-family .identity-paper h2 span{font-size: 20px; letter-spacing: 0px;}
.hf-family .identity-rule{height: 2px; background: rgb(213, 0, 22); margin: 23px 0px; width: 50px;}
.hf-family .identity-paper p{font-size: 13px; line-height: 1.7; margin: 0px;}
.hf-family .identity-corner{position: absolute; right: 28px; bottom: 32px; color: rgb(217, 0, 18); font-size: 85px; font-weight: 700; letter-spacing: -0.075em; opacity: 0.13;}
.hf-family .identity-card{position: absolute; right: 0px; bottom: 0px; width: 350px; padding: 25px 28px; background: rgb(25, 29, 34); border-width: 1px 1px 1px 3px; border-style: solid; border-color: rgb(86, 91, 100) rgb(86, 91, 100) rgb(86, 91, 100) rgb(224, 0, 22); border-image: none; border-radius: 8px; box-shadow: rgba(0, 0, 0, 0.4) 0px 17px 40px;}
.hf-family .identity-card small{font-size: 12px; color: rgb(198, 202, 209);}
.hf-family .identity-card strong{display: block; font-size: 24px; margin: 8px 0px 21px;}
.hf-family .identity-card span{display: flex; align-items: center; justify-content: space-between; font-size: 13px;}
.hf-family .identity-card svg{color: var(--red); width: 18px;}
.hf-family .privacy-scene{position: relative; height: 100%; perspective: 1100px;}
.hf-family .privacy-plane{position: absolute; width: 340px; height: 390px; top: 10px; border: 1px solid rgba(195, 188, 194, 0.314); border-radius: 18px; background: linear-gradient(135deg, rgba(189, 195, 203, 0.145), rgba(35, 39, 45, 0.44)); box-shadow: rgba(0, 0, 0, 0.333) 0px 25px 50px; padding: 27px 29px; transform: rotateY(-20deg) rotateZ(-7deg);}
.hf-family .privacy-plane > span{font-size: 10px; letter-spacing: 0.17em; color: rgb(216, 215, 221);}
.hf-family .p-back{left: 40px; top: 30px; background: linear-gradient(135deg, rgba(76, 25, 39, 0.667), rgba(29, 29, 36, 0.376)); border-color: rgba(163, 33, 54, 0.333);}
.hf-family .p-back i{display: block; height: 6px; background: rgba(151, 142, 152, 0.25); margin-top: 40px; width: 80%;}
.hf-family .p-back i:nth-child(3){width: 55%;}
.hf-family .p-front{right: 45px; transform: rotateY(-20deg) rotateZ(7deg); background: linear-gradient(145deg, rgba(196, 206, 209, 0.16), rgba(31, 37, 42, 0.565));}
.hf-family .fingerprint{width: 220px; height: 270px; display: block; margin: 20px auto 0px; stroke: rgb(238, 36, 59); stroke-width: 1.8; filter: drop-shadow(rgba(255, 0, 25, 0.3) 0px 0px 8px);}
.hf-family .privacy-badge{position: absolute; left: 74px; bottom: 7px; border: 1px solid rgb(85, 91, 100); border-radius: 9px; background: rgb(25, 29, 34); display: flex; align-items: center; gap: 18px; padding: 23px; width: 420px;}
.hf-family .privacy-badge > b{color: white; background: rgb(213, 0, 24); display: grid; place-items: center; width: 45px; height: 45px; border-radius: 50%;}
.hf-family .privacy-badge small{font-size: 11px; color: rgb(199, 203, 209); display: block; margin-bottom: 8px;}
.hf-family .privacy-badge strong{font-size: 20px;}
.hf-family .sitemap-scene{height: 100%; position: relative;}
.hf-family .az-index{position: absolute; left: 8px; top: 12px; font-weight: 750; font-size: 148px; line-height: 1; letter-spacing: -0.08em; color: rgb(239, 237, 231);}
.hf-family .az-index span{color: rgb(223, 0, 25); font-size: 100px; padding: 0px 13px; vertical-align: 11px;}
.hf-family .directory{position: absolute; top: 130px; left: 45px; right: 0px; border-radius: 9px; overflow: hidden; background: rgb(26, 30, 35); border: 1px solid rgb(84, 89, 99); box-shadow: rgba(0, 0, 0, 0.4) 0px 25px 50px;}
.hf-family .directory > div{display: flex; align-items: center; gap: 24px; padding: 20px 25px; border-bottom: 1px solid rgba(73, 78, 86, 0.37); position: relative;}
.hf-family .directory > div:last-child{border-bottom: 0px;}
.hf-family .directory small{font-size: 11px; color: rgb(179, 185, 195);}
.hf-family .directory strong{font-size: 20px; font-weight: 600; letter-spacing: -0.025em;}
.hf-family .directory svg{margin-left: auto; color: rgb(238, 0, 30); width: 20px;}
.hf-family .directory .hf-active{background: rgb(56, 32, 39);}
.hf-family .directory .hf-active::before{content: ""; position: absolute; left: 0px; top: 0px; bottom: 0px; width: 3px; background: rgb(232, 0, 27);}
.hf-family [data-theme="dark"]{--header: #171b1f; --header-ink: #f1efe9; color-scheme: dark;}
.hf-family [data-theme="dark"] .hf-logo-light{display: none;}
.hf-family [data-theme="dark"] .hf-logo-dark{display: block;}
@media (prefers-reduced-motion: no-preference){.hf-family .hf-cube{animation: 12s ease-in-out 0s infinite normal none running cube-float;}
.hf-family .network-core{animation: 8s ease-in-out 0s infinite normal none running core-light;}
.hf-family .privacy-plane.p-front{animation: 13s ease-in-out 0s infinite normal none running glass-float;}
.hf-family.hf-hero-brand .palette{animation: 9s ease-in-out 0s infinite normal none running palette-light;}
.hf-family .learn-steps .current{animation: 7s ease-in-out 0s infinite normal none running palette-light;}
@keyframes cube-float{0%, 100% { transform: translate(-50%, 0px); }
50% { transform: translate(-50%, -11px); }}
@keyframes glass-float{0%, 100% { transform: rotateY(-20deg) rotateZ(7deg) translateY(0px); }
50% { transform: rotateY(-20deg) rotateZ(7deg) translateY(-9px); }}
@keyframes palette-light{0%, 100% { box-shadow: rgba(0, 0, 0, 0.333) 0px 15px 35px; }
50% { box-shadow: rgba(169, 0, 19, 0.157) 0px 15px 40px; }}
@keyframes core-light{0%, 100% { box-shadow: rgba(213, 0, 24, 0.082) 0px 0px 80px; }
50% { box-shadow: rgba(213, 0, 24, 0.208) 0px 0px 110px; }}}
@media (min-width: 1900px){.hf-family h1{font-size: 63px;}}
@media (max-width: 1350px){.hf-family .hf-wrap{width: calc(100% - 72px);}
.hf-family .hf-logo{width: 295px;}
.hf-family .hf-header-inner{gap: 25px;}
.hf-family .hf-site-header nav{font-size: 16px; gap: 22px;}
.hf-family .hf-controls{gap: 13px;}
.hf-family .hf-visual{width: 49%; top: 125px; height: 550px;}
.hf-family .hf-scene-rail{padding: 0px 16px; gap: 12px; font-size: 11px;}
.hf-family .hf-scene-rail > span:first-child{font-size: 10px; letter-spacing: 0.09em;}
.hf-family .hf-hero-copy{width: 45%;}
.hf-family h1{font-size: 49px;}
.hf-family .hf-intro{font-size: 18px;}
.hf-family .hf-primary{font-size: 14px; padding: 19px;}
.hf-family .hf-actions{gap: 18px;}
.hf-family .hf-secondary{font-size: 13px; gap: 8px;}
.hf-family .hf-baseline-inner{font-size: 15px; gap: 30px;}
.hf-family .hf-baseline-inner > div{gap: 23px;}
.hf-family .network-item{width: 165px; padding: 22px; font-size: 16px;}
.hf-family .network-ring{width: 430px;}
.hf-family .hf-art{height: 490px;}
.hf-family .hf-cube{width: 500px; top: 0px;}
.hf-family .project-caption strong{font-size: 22px;}
.hf-family .mini-screen{bottom: 40px;}
.hf-family .work-tabs > span{gap: 7px; padding: 18px 8px;}
.hf-family .work-tabs b{font-size: 11px;}
.hf-family .journal-card > img{height: 220px;}
.hf-family .hf-journal-copy h2{font-size: 23px;}
.hf-family .brand-art{right: -130px;}
.hf-family .editorial-paper{right: 87px; left: 25px;}
.hf-family .editorial-paper h2{font-size: 58px;}
.hf-family .privacy-plane{width: 285px;}
.hf-family .p-back{left: 10px;}
.hf-family .p-front{right: 0px;}
.hf-family .privacy-badge{left: 20px; width: 370px;}
.hf-family .identity-paper{left: 20px; right: 30px;}
.hf-family .directory{left: 22px;}
.hf-family .home-art{right: -180px; width: 1210px;}
.hf-family .side-index{bottom: 70px;}}
@media (max-width: 1100px){.hf-family .hf-site-header nav{display: none;}
.hf-family .hf-controls{margin-left: auto;}
.hf-family .hf-menu-toggle{display: flex; flex-direction: column; gap: 6px; align-items: center; justify-content: center;}
.hf-family .hf-menu-toggle i{width: 23px; height: 2px; background: currentcolor;}
.hf-family .hf-contact{display: none;}
.hf-family .hf-hero-stage{height: auto; min-height: 0px;}
.hf-family .hf-hero-inner{display: grid; grid-template-columns: 1fr; gap: 30px; padding-top: 30px; padding-bottom: 65px;}
.hf-family .hf-breadcrumb{position: static; font-size: 12px;}
.hf-family.hf-hero-home .hf-breadcrumb{display: none;}
.hf-family .hf-hero-copy{position: relative; transform: none; top: auto; max-width: 800px; padding-top: 25px; width: 100% !important;}
.hf-family .hf-eyebrow{margin-bottom: 23px; font-size: 12px;}
.hf-family h1{font-size: clamp(43px, 6vw, 64px); margin-bottom: 24px;}
.hf-family .hf-intro{max-width: 690px; font-size: 19px; margin-bottom: 27px;}
.hf-family .hf-visual{position: relative; right: auto; top: auto; width: 100%; height: 610px; max-width: 760px; justify-self: center;}
.hf-family .hf-art{height: 530px;}
.hf-family .hf-scene-rail{height: 58px; font-size: 13px; padding: 0px 20px;}
.hf-family .hf-scene-rail > span:first-child{font-size: 12px;}
.hf-family .home-art{right: -80px; width: 1100px; height: 625px; top: -20px; mask-image: linear-gradient(90deg, transparent, rgb(0, 0, 0) 15%, rgb(0, 0, 0) 95%, transparent);}
.hf-family.hf-hero-home .hf-visual{height: 560px;}
.hf-family .brand-art{right: -110px; top: -65px;}
.hf-family .hf-cube{width: 570px; max-height: 520px; top: -25px;}
.hf-family .service-network{max-width: 680px;}
.hf-family .network-item{width: 190px;}
.hf-family .hf-baseline{height: auto; min-height: 104px;}
.hf-family .hf-baseline-inner{padding-top: 25px; padding-bottom: 25px; font-size: 16px; flex-wrap: wrap; gap: 15px;}
.hf-family .hf-baseline-inner > strong{max-width: 100%; width: 100%;}
.hf-family .hf-back-word{font-size: 15vw; bottom: 0px;}
.hf-family .project-image{aspect-ratio: 1.85 / 1;}
.hf-family .mini-screen{bottom: 6px;}
.hf-family .side-index{bottom: 38px;}
.hf-family .work-scene .project-image{aspect-ratio: 1.95 / 1;}
.hf-family .work-tabs b{font-size: 14px;}
.hf-family .work-tabs > span{padding: 18px 14px;}
.hf-family .journal-card > img{height: 260px;}
.hf-family .hf-journal-copy h2{font-size: 27px;}
.hf-family .journal-index{margin-top: 17px;}
.hf-family .identity-paper{left: 85px; right: 85px;}
.hf-family .p-front{right: 85px;}
.hf-family .p-back{left: 55px;}
.hf-family .privacy-plane{width: 330px; height: 420px;}
.hf-family .privacy-badge{left: 110px; bottom: 4px; width: 420px;}
.hf-family .editorial-paper{left: 55px; right: 120px;}
.hf-family .editorial-paper h2{font-size: 72px;}
.hf-family .directory{left: 75px; right: 40px; top: 140px;}
.hf-family .directory > div{padding: 23px 28px;}
.hf-family .az-index{left: 55px;}
.hf-family .offer-window{margin-top: 20px;}
.hf-family .offer-design{height: 260px;}
.hf-family .offer-design > strong{font-size: 40px;}
.hf-family .offer-bottom{padding: 22px;}
.hf-family .price{right: 10px; bottom: 0px;}
.hf-family .hf-agency-orbit{width: 690px; height: 600px; top: -44px;}
.hf-family .hf-agency-az{top: 169px;}
.hf-family .agency-person{bottom: 5px; right: 30px;}
.hf-family .ai-art{right: -130px;}
.hf-family .hf-review-nav{padding: 24px 36px;}
.hf-family.hf-hero-home .hf-hero-copy{z-index: 4;}}
@media (max-width: 600px){.hf-family .hf-wrap{width: calc(100% - 40px);}
.hf-family .hf-site-header{height: 86px;}
.hf-family .hf-header-inner{gap: 12px;}
.hf-family .hf-logo{width: min(54vw, 230px);}
.hf-family .hf-logo img{height: 45px;}
.hf-family .hf-controls{gap: 9px;}
.hf-family .hf-theme-toggle,.hf-family  .hf-menu-toggle{width: 41px; height: 44px; border-radius: 9px;}
.hf-family .hf-language{font-size: 12px;}
.hf-family .hf-theme-toggle span{width: 21px; height: 21px;}
.hf-family .hf-menu-toggle{display: none;}
.hf-family .hf-hero-inner{padding-top: 23px; padding-bottom: 40px; gap: 28px;}
.hf-family .hf-hero-copy{padding-top: 13px;}
.hf-family .hf-eyebrow{font-size: 10px; gap: 12px; line-height: 1.7; letter-spacing: 0.1em;}
.hf-family .hf-eyebrow::before{width: 24px; height: 2px;}
.hf-family h1{font-size: 42px; line-height: 1.08;}
.hf-family .hf-intro{font-size: 16px; line-height: 1.8;}
.hf-family .hf-actions{gap: 18px; flex-wrap: wrap;}
.hf-family .hf-primary{min-height: 56px; font-size: 13px; padding: 16px 19px; gap: 14px;}
.hf-family .hf-primary svg{width: 20px;}
.hf-family .hf-secondary{font-size: 12px;}
.hf-family .hf-visual{height: 385px; max-width: 100%;}
.hf-family .hf-scene-rail{height: 61px; padding: 10px 13px; gap: 6px; flex-direction: column; align-items: flex-start; justify-content: center; font-size: 11px;}
.hf-family .hf-scene-rail > span:first-child{font-size: 10px; letter-spacing: 0.09em; gap: 8px;}
.hf-family .hf-scene-rail i{width: 6px; height: 6px;}
.hf-family .hf-scene-rail > span:last-child{text-align: left; padding-left: 14px;}
.hf-family .hf-art{margin-top: 15px; height: 310px;}
.hf-family .hf-baseline-inner{font-size: 14px; gap: 14px; padding: 23px 0px;}
.hf-family .hf-baseline-inner > div{font-size: 12px; gap: 24px; flex-wrap: wrap;}
.hf-family .hf-baseline-inner > strong{line-height: 1.6;}
.hf-family .hf-baseline-inner > div > span + span::before{top: 7px;}
.hf-family .hf-breadcrumb{font-size: 10px; gap: 10px; line-height: 1.5;}
.hf-family .hf-back-word{font-size: 18vw; bottom: 0px;}
.hf-family.hf-hero-home .hf-visual{height: 365px;}
.hf-family .home-art{height: 385px; width: 680px; right: -48px; top: -20px; mask-image: linear-gradient(90deg, transparent, rgb(0, 0, 0) 19%, rgb(0, 0, 0) 92%, transparent);}
.hf-family .service-network{height: 305px;}
.hf-family .network-ring{width: 290px; height: 230px;}
.hf-family .network-ring.r2{width: 230px; height: 290px;}
.hf-family .network-core{width: 106px; height: 106px; gap: 9px;}
.hf-family .network-core img{width: 43px; height: 43px;}
.hf-family .network-core span{font-size: 10px;}
.hf-family .network-item{width: 113px; padding: 16px 13px; font-size: 12px; gap: 9px; border-radius: 7px;}
.hf-family .network-item svg{width: 20px; height: 20px;}
.hf-family .n0{left: 9%; top: 2%;}
.hf-family .n1{right: 0px; top: 13%;}
.hf-family .n2{right: 0px; top: 55%;}
.hf-family .n3{right: 22%; bottom: 0px;}
.hf-family .n4{left: 0px; bottom: 7%;}
.hf-family .n5{left: 0px; top: 38%;}
.hf-family .brand-art{height: 350px; width: 810px; right: -70px; top: -20px;}
.hf-family .palette{width: 195px; right: 0px; bottom: 0px; padding: 13px 15px; gap: 6px;}
.hf-family .palette b{font-size: 31px;}
.hf-family .swatch{height: 25px; width: 19px;}
.hf-family .palette small{font-size: 9px;}
.hf-family .hf-cube{width: 350px; max-height: 293px; top: -15px;}
.hf-family .chips{gap: 7px;}
.hf-family .chips > span{padding: 11px 13px; font-size: 11px; border-radius: 6px; gap: 8px;}
.hf-family .chips b{width: 5px; height: 5px;}
.hf-family .platforms{bottom: 0px;}
.hf-family .web-scene{padding: 4px 12px 0px 2px;}
.hf-family .project-image{padding: 10px; aspect-ratio: 1.78 / 1;}
.hf-family .project-caption{padding: 13px;}
.hf-family .project-caption strong{font-size: 19px;}
.hf-family .project-caption small{font-size: 9px;}
.hf-family .mini-screen{width: 43%; bottom: 0px; right: 0px; border-width: 5px;}
.hf-family .mini-screen span{padding: 6px 2px 1px; font-size: 8px;}
.hf-family .side-index{font-size: 9px; left: 9px; bottom: 12px; gap: 10px;}
.hf-family .side-index b{padding: 7px;}
.hf-family .work-scene .project-image{aspect-ratio: 1.78 / 1; padding: 11px;}
.hf-family .work-scene .project-caption{padding: 12px 14px;}
.hf-family .work-tabs{gap: 6px; margin-top: 11px;}
.hf-family .work-tabs > span{padding: 13px 8px; font-size: 8px; gap: 6px; flex-wrap: wrap; white-space: normal;}
.hf-family .work-tabs b{font-size: 10px;}
.hf-family .ai-art{height: 380px; width: 835px; right: -120px; top: -19px;}
.hf-family .ai-node{font-size: 10px; padding: 12px; gap: 8px; border-radius: 6px;}
.hf-family .ai-node svg{width: 19px; height: 19px;}
.hf-family .ai-node.source{top: 15px; left: 0px;}
.hf-family .ai-node.target{top: 135px; right: 0px;}
.hf-family .ai-callout{bottom: 0px; left: 0px; font-size: 12px; padding: 17px 15px; gap: 13px;}
.hf-family .live-dot{width: 6px; height: 6px; box-shadow: rgba(231, 0, 24, 0.098) 0px 0px 0px 5px;}
.hf-family .learn-photo{inset: 0px 0px 110px;}
.hf-family .learn-steps{left: 9px; gap: 5px;}
.hf-family .learn-steps > div{font-size: 10px; padding: 10px 12px; gap: 9px;}
.hf-family .learn-steps b{width: 22px; height: 22px; font-size: 9px;}
.hf-family .learn-steps > div:nth-child(1){margin-right: 25px;}
.hf-family .learn-steps > div:nth-child(2){margin-left: 12px; margin-right: 12px;}
.hf-family .learn-steps > div:nth-child(3){margin-left: 25px;}
.hf-family .learn-steps svg{width: 15px;}
.hf-family .editorial-back{inset: 18px 52px 10px 8px;}
.hf-family .editorial-back span{font-size: 7px; left: 14px; bottom: 12px;}
.hf-family .editorial-paper{inset: 5px 50px 36px 14px; padding: 18px 21px;}
.hf-family .editorial-paper small{font-size: 8px;}
.hf-family .editorial-paper h2{font-size: 42px; margin: 20px 0px 17px;}
.hf-family .copy-lines{gap: 5px;}
.hf-family .copy-lines i{height: 2px;}
.hf-family .editorial-picture{width: 56%; border-width: 5px; bottom: 0px;}
.hf-family .editorial-picture span{font-size: 8px; padding: 8px 3px 2px;}
.hf-family .editorial-picture svg{width: 13px;}
.hf-family .editorial-mark{font-size: 7px; right: 4px; top: 15px;}
.hf-family .offer-scene{padding: 0px 15px 0px 0px;}
.hf-family .offer-window{margin-top: 0px;}
.hf-family .offer-nav{font-size: 9px; padding: 12px 13px;}
.hf-family .offer-design{height: 158px; padding: 18px;}
.hf-family .offer-design > small{font-size: 6px;}
.hf-family .offer-design > strong{font-size: 25px; margin: 12px 0px;}
.hf-family .tiny-cta{font-size: 6px; padding: 7px 8px;}
.hf-family .offer-dot{width: 100px; height: 100px; right: 13px; top: 30px;}
.hf-family .offer-arch{width: 110px; height: 160px; border-width: 14px; bottom: -100px; right: -21px;}
.hf-family .offer-bottom{padding: 10px; gap: 7px;}
.hf-family .offer-bottom > span{padding: 9px 7px;}
.hf-family .offer-bottom small{font-size: 6px; margin-bottom: 8px;}
.hf-family .offer-bottom b{font-size: 7px; margin-bottom: 6px;}
.hf-family .offer-bottom i{height: 2px;}
.hf-family .price{width: 175px; padding: 12px 15px; right: 0px; bottom: 0px;}
.hf-family .price > span{font-size: 8px;}
.hf-family .price > div{margin-top: 5px; gap: 6px;}
.hf-family .price strong{font-size: 43px;}
.hf-family .price small{font-size: 10px;}
.hf-family .price b{font-size: 24px;}
.hf-family .price p{font-size: 7px; margin-top: 4px;}
.hf-family .hf-agency-orbit{width: 400px; height: 360px; top: -28px;}
.hf-family .hf-agency-az{width: 76px; height: 76px; top: 98px;}
.hf-family .agency-person{width: 285px; bottom: 0px; right: 0px; padding: 12px; gap: 12px;}
.hf-family .agency-person img{width: 47px; height: 47px;}
.hf-family .agency-person small,.hf-family  .agency-person span{font-size: 9px;}
.hf-family .agency-person strong{font-size: 16px;}
.hf-family .agency-person svg{width: 18px;}
.hf-family .journal-card > img{height: 143px;}
.hf-family .hf-journal-copy{padding: 14px 16px;}
.hf-family .hf-journal-copy > div{font-size: 8px; gap: 10px;}
.hf-family .hf-journal-copy h2{font-size: 18px; line-height: 1.22; margin: 13px 0px;}
.hf-family .hf-read-more{font-size: 10px;}
.hf-family .hf-read-more svg{width: 17px;}
.hf-family .journal-index{padding: 10px 12px; font-size: 9px; gap: 9px; margin-top: 9px;}
.hf-family .journal-index b{width: 23px; height: 23px; font-size: 9px;}
.hf-family .journal-index i{display: none;}
.hf-family.hf-hero-journal .hf-visual{height: 419px;}
.hf-family.hf-hero-journal .hf-art{height: 344px;}
.hf-family .identity-paper{inset: 0px 35px 22px 20px; padding: 20px 22px;}
.hf-family .identity-paper > small{font-size: 6px;}
.hf-family .identity-az{width: 45px; height: 45px; margin: 18px 0px 12px;}
.hf-family .identity-paper h2{font-size: 31px;}
.hf-family .identity-paper h2 span{font-size: 14px;}
.hf-family .identity-rule{margin: 14px 0px; width: 32px;}
.hf-family .identity-paper p{font-size: 9px;}
.hf-family .identity-corner{font-size: 63px; right: 15px; bottom: 30px;}
.hf-family .identity-card{width: 232px; bottom: 0px; padding: 15px 17px;}
.hf-family .identity-card small{font-size: 8px;}
.hf-family .identity-card strong{font-size: 17px; margin: 6px 0px 12px;}
.hf-family .identity-card span{font-size: 9px;}
.hf-family .identity-card svg{width: 14px;}
.hf-family .privacy-plane{width: 200px; height: 263px; top: 7px; border-radius: 12px; padding: 17px;}
.hf-family .p-back{left: 0px; top: 16px;}
.hf-family .p-front{right: 0px;}
.hf-family .privacy-plane > span{font-size: 7px;}
.hf-family .p-back i{height: 4px; margin-top: 25px;}
.hf-family .fingerprint{width: 139px; height: 180px; margin-top: 12px;}
.hf-family .privacy-badge{left: 12px; bottom: 0px; width: 293px; padding: 15px; gap: 13px;}
.hf-family .privacy-badge > b{width: 32px; height: 32px;}
.hf-family .privacy-badge svg{width: 20px;}
.hf-family .privacy-badge small{font-size: 8px; margin-bottom: 5px;}
.hf-family .privacy-badge strong{font-size: 14px;}
.hf-family .az-index{font-size: 96px; left: 12px; top: 0px;}
.hf-family .az-index span{font-size: 63px; vertical-align: 9px; padding: 0px 10px;}
.hf-family .directory{top: 84px; left: 22px; right: 0px;}
.hf-family .directory > div{padding: 13px 15px; gap: 15px;}
.hf-family .directory strong{font-size: 13px;}
.hf-family .directory small{font-size: 8px;}
.hf-family .directory svg{width: 16px; height: 16px;}
.hf-family .hf-review-nav{padding: 22px 20px; font-size: 11px; gap: 15px; flex-wrap: wrap;}
.hf-family .hf-review-nav > span{display: none;}}
.hf-family .home-art,.hf-family  .brand-art,.hf-family  .ai-art{--fade-x: linear-gradient(90deg,transparent,#000 28%,#000 91%,transparent); --fade-y: linear-gradient(180deg,transparent,#000 12%,#000 82%,transparent); mask-image: var(--fade-x),var(--fade-y); mask-composite: intersect;}
.hf-family .brand-art{--fade-x: linear-gradient(90deg,transparent,#000 42%,#000 86%,transparent);}
.hf-family .ai-art{--fade-x: linear-gradient(90deg,transparent,#000 38%,#000 88%,transparent);}
.hf-family .hf-trails{mask-image: linear-gradient(90deg, transparent 30%, rgb(0, 0, 0) 65%);}
.hf-family.hf-hero-legal .hf-secondary,.hf-family.hf-hero-privacy .hf-secondary,.hf-family.hf-hero-sitemap .hf-secondary{display: none;}
@media (max-width: 1100px){.hf-family .home-art{--fade-x: linear-gradient(90deg,transparent,#000 15%,#000 95%,transparent);}}
@media (max-width: 600px){.hf-family .hf-logo{width: min(47vw, 200px);}
.hf-family .hf-menu-toggle{display: flex;}
.hf-family .home-art{--fade-x: linear-gradient(90deg,transparent,#000 19%,#000 92%,transparent);}}
.hf-family.hf-direction-two .hf-hero-stage{height: 760px;}
.hf-family.hf-direction-two .hf-hero-copy{width: 44%; top: 50%; transform: translateY(-45%);}
.hf-family.hf-direction-two .hf-visual{top: 92px; height: 588px; width: 49.2%; display: flex; flex-direction: column; gap: 20px;}
.hf-family.hf-direction-two .hf-art{height: auto; min-height: 0px; flex: 1 1 0%; margin: 0px;}
.hf-family.hf-direction-two .hf-scene-rail{flex: 0 0 auto; width: 100%; font-size: 13px;}
.hf-family.hf-direction-two .hf-visual[data-rail="none"]{top: 112px; height: 550px;}
.hf-family.hf-direction-two .hf-back-word{font-size: clamp(130px, 12.5vw, 210px); bottom: -9px; opacity: 0.65;}
.hf-family.hf-direction-two .hf-baseline{height: 144px; background: rgb(20, 24, 28); border-top: 1px solid rgba(74, 80, 86, 0.23);}
.hf-family.hf-direction-two .hf-baseline-inner{display: grid; grid-template-columns: 1.05fr 1fr 1.05fr; gap: 0px; height: 100%; padding: 0px;}
.hf-family.hf-direction-two .hf-baseline-inner > .hf-strip-item{display: flex; align-items: center; justify-content: flex-start; gap: 22px; height: 76px; padding: 0px 30px; min-width: 0px; color: rgb(247, 245, 239);}
.hf-family.hf-direction-two .hf-strip-item:first-child{padding-left: 0px;}
.hf-family.hf-direction-two .hf-strip-item:last-child{padding-right: 0px;}
.hf-family.hf-direction-two .hf-strip-item + .hf-strip-item{border-left: 1px solid rgba(115, 121, 132, 0.26);}
.hf-family .hf-strip-copy{display: grid; gap: 8px; min-width: 0px;}
.hf-family .hf-strip-copy strong{font-size: 18px; line-height: 1.35; font-weight: 600;}
.hf-family .hf-strip-copy > span{font-size: 14px; font-weight: 350; line-height: 1.6; color: rgb(198, 203, 209);}
.hf-family .hf-strip-portrait{width: 70px; height: 70px; object-fit: cover; border-radius: 50%; border: 1px solid rgba(105, 113, 103, 0.533); flex: 0 0 auto;}
.hf-family .hf-strip-icon{color: rgb(237, 0, 27); display: flex; align-items: center; justify-content: center; width: 38px; flex: 0 0 auto;}
.hf-family .hf-strip-icon svg{width: 32px; height: 32px;}
.hf-family .hf-strip-number{font-size: 58px; line-height: 1; font-weight: 750; letter-spacing: -0.07em; display: flex; align-items: center; white-space: nowrap;}
.hf-family .hf-strip-number em{font-style: normal; color: rgb(227, 0, 22); font-size: 0.6em; margin-left: 7px; letter-spacing: 0px;}
.hf-family .hf-red-dot{width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: var(--red); flex: 0 0 auto;}
.hf-family .hf-location-dot{width: 23px; display: grid; place-items: center; flex: 0 0 auto;}
.hf-family .hf-location-dot i{box-shadow: rgba(219, 0, 21, 0.125) 0px 0px 0px 7px;}
.hf-family.hf-direction-two .hf-trails{opacity: 0.65;}
.hf-family .hf-home-panorama{position: absolute; inset: 0px 0px 0px auto; height: 100%; width: 1200px; max-width: none; object-fit: cover; object-position: center center; z-index: -2; mask-image: linear-gradient(90deg, transparent 0%, rgb(0, 0, 0) 28%, rgb(0, 0, 0));}
.hf-family.hf-direction-two.hf-hero-home .hf-hero-copy{width: 46%;}
.hf-family.hf-direction-two.hf-hero-home h1{font-size: 70px; line-height: 1.035; letter-spacing: -0.055em;}
.hf-family.hf-direction-two.hf-hero-home .hf-intro{max-width: 600px;}
.hf-family.hf-direction-two.hf-hero-home .hf-visual{top: auto; bottom: 62px; height: 58px; width: 46%;}
.hf-family.hf-direction-two.hf-hero-home .hf-art{display: none;}
.hf-family.hf-direction-two.hf-hero-home .hf-back-word{z-index: -1; opacity: 0.45; font-size: 12.5vw;}
.hf-family.hf-direction-two.hf-hero-home .hf-scene-rail{background: rgba(25, 29, 34, 0.96);}
.hf-family .home-note{display: flex; align-items: center; gap: 13px; margin: 28px 0px 0px; font-size: 13px; color: rgb(203, 208, 214); font-weight: 350;}
.hf-family .hf-discipline-wall{position: relative; height: 100%; padding: 0px 0px 0px 35px;}
.hf-family .hf-discipline-title{font-size: 55px; font-weight: 600; letter-spacing: -0.045em; line-height: 1.14; margin: 5px 0px 35px;}
.hf-family .hf-discipline-title em{font-style: normal; color: rgb(238, 0, 29);}
.hf-family .hf-discipline-lines{display: grid; grid-template-columns: 1fr 1fr; gap: 0px 35px; max-width: 610px;}
.hf-family .hf-discipline-lines > div{display: flex; align-items: center; gap: 17px; padding: 22px 0px; border-bottom: 1px solid rgba(102, 106, 114, 0.3); font-weight: 550; font-size: 24px;}
.hf-family .hf-discipline-lines svg{width: 28px; height: 28px; color: rgb(240, 0, 29);}
.hf-family .hf-discipline-lines i{width: 6px; height: 6px; border-radius: 50%; background: rgb(184, 191, 199); margin-left: auto;}
.hf-family .hf-discipline-seal{display: flex; align-items: center; gap: 14px; margin: 34px 0px 0px;}
.hf-family .hf-discipline-seal img{width: 50px; height: 50px;}
.hf-family .hf-discipline-seal span{font-size: 10px; line-height: 1.7; letter-spacing: 0.14em; color: rgb(191, 197, 204);}
.hf-family .hf-identity-studio{height: 100%; position: relative; isolation: isolate;}
.hf-family .hf-type-hero{position: absolute; left: 12px; top: -70px; font-size: 400px; line-height: 1.12; font-weight: 750; letter-spacing: -0.13em; transform: rotate(-8deg); color: rgb(242, 238, 230); text-shadow: rgb(167, 170, 169) 0px 3px, rgb(98, 101, 102) 0px 9px, rgba(0, 0, 0, 0.533) 0px 20px 50px; white-space: nowrap;}
.hf-family .hf-type-hero > span{color: rgb(223, 0, 20); display: inline-block; transform: translate(-20px, 25px); text-shadow: rgb(183, 0, 18) 0px 3px, rgb(115, 0, 14) 0px 9px, rgba(0, 0, 0, 0.4) 0px 20px 50px;}
.hf-family .hf-type-hero > i{position: absolute; width: 400px; height: 230px; border: 2px solid rgba(200, 192, 173, 0.45); border-radius: 50%; left: 57px; top: 115px; rotate: -32deg; z-index: -1;}
.hf-family .hf-brand-ticket{position: absolute; bottom: 9px; left: 18px; padding: 27px 32px; width: 365px; background: rgb(240, 236, 227); color: rgb(28, 33, 37); transform: rotate(4deg); box-shadow: rgba(0, 0, 0, 0.333) 0px 20px 50px;}
.hf-family .hf-brand-ticket small{font-size: 8px; letter-spacing: 0.2em;}
.hf-family .hf-brand-ticket strong{display: block; margin: 17px 0px 18px; font-size: 38px; line-height: 1.05; letter-spacing: -0.045em;}
.hf-family .hf-brand-ticket > span{font-size: 10px;}
.hf-family .hf-brand-colours{position: absolute; right: 15px; bottom: 18px; display: flex; gap: 11px; transform: rotate(-7deg);}
.hf-family .hf-brand-colours i{width: 54px; height: 77px; background: rgb(227, 0, 22); box-shadow: rgb(147, 0, 13) 0px 5px 0px;}
.hf-family .hf-brand-colours i:nth-child(2){background: rgb(241, 237, 228); box-shadow: rgb(178, 175, 169) 0px 5px 0px;}
.hf-family .hf-brand-colours i:nth-child(3){background: rgb(85, 91, 100); box-shadow: rgb(41, 46, 52) 0px 5px 0px;}
.hf-family .hf-type-small{position: absolute; right: 10px; bottom: 115px; font-size: 33px; letter-spacing: -0.04em; color: rgb(181, 183, 188);}
.hf-family .web-showcase{height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 19px;}
.hf-family .web-showcase .project-screen{box-shadow: rgba(0, 0, 0, 0.467) 0px 25px 60px; transform: perspective(1500px) rotateY(-5deg); transform-origin: left center;}
.hf-family .web-showcase .project-image{aspect-ratio: 1.85 / 1; padding: 20px 22px;}
.hf-family .web-showcase .project-caption{padding: 18px 23px;}
.hf-family .showcase-links{display: flex; gap: 23px; align-items: center; font-size: 13px; color: rgb(188, 194, 203); padding-left: 5px;}
.hf-family .showcase-links span{padding-bottom: 9px; border-bottom: 2px solid transparent;}
.hf-family .showcase-links .hf-active{color: rgb(255, 255, 255); border-color: rgb(238, 0, 26);}
.hf-family.hf-direction-two .hf-apps-scene .hf-cube{width: 620px; max-width: 100%; max-height: 550px; top: -22px; filter: drop-shadow(rgba(0, 0, 0, 0.467) 0px 25px 36px);}
.hf-family.hf-direction-two .hf-apps-scene .hf-cube-aura{inset: 10%; background: radial-gradient(rgba(188, 19, 45, 0.3), transparent 67%);}
.hf-family .automation-studio{height: 100%; position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 40px;}
.hf-family .automation-wires{position: absolute; inset: 10px -35px 45px; width: calc(100% + 70px); height: calc(100% - 55px); stroke: rgb(202, 21, 42); stroke-width: 1.2; stroke-dasharray: 4, 12; opacity: 0.7;}
.hf-family .automation-input,.hf-family  .automation-output{display: grid; gap: 71px; position: relative; z-index: 2;}
.hf-family .automation-input > span,.hf-family  .automation-output > span{font-size: 16px; display: flex; align-items: center; gap: 14px; background: rgb(24, 29, 34); border: 1px solid rgba(127, 133, 135, 0.333); padding: 20px 18px; border-radius: 9px; min-width: 177px;}
.hf-family .automation-input svg{color: rgb(185, 195, 206); width: 23px;}
.hf-family .automation-output svg{color: rgb(237, 0, 27); width: 20px; margin-left: auto;}
.hf-family .automation-core{width: 178px; height: 178px; background: radial-gradient(at 30% 20%, rgb(255, 26, 48), rgb(181, 0, 21)); border: 1px solid rgb(246, 65, 80); box-shadow: rgb(96, 12, 27) 0px 15px 0px, rgba(173, 0, 20, 0.275) 0px 20px 65px; display: flex; align-items: center; justify-content: center; flex-direction: column; border-radius: 26px; position: relative; transform: rotate(-6deg);}
.hf-family .automation-core > svg{width: 48px; height: 48px; stroke-width: 1.2;}
.hf-family .automation-core > b{font-size: 45px; letter-spacing: -0.06em; line-height: 1.2;}
.hf-family .automation-core > span{font-size: 6px; letter-spacing: 0.09em; margin-top: 9px;}
.hf-family .automation-studio > p{position: absolute; bottom: 0px; left: 0px; width: 100%; font-size: 19px; color: rgb(205, 209, 216); margin: 0px; text-align: center;}
.hf-family .hf-learning-story{position: relative; height: 100%;}
.hf-family .hf-learning-photo{position: absolute; top: 2px; right: 0px; width: 94%; height: 362px; border: 1px solid rgba(186, 168, 150, 0.35); border-radius: 6px; overflow: hidden; transform: rotate(2deg); box-shadow: rgba(0, 0, 0, 0.4) 0px 20px 50px;}
.hf-family .hf-learning-photo img{width: 100%; height: 100%; object-fit: cover;}
.hf-family .hf-learning-question{position: absolute; left: 0px; bottom: 14px; background: rgb(239, 235, 226); color: rgb(32, 35, 38); padding: 24px 28px; width: 78%; box-shadow: rgba(0, 0, 0, 0.4) 0px 16px 40px; border-left: 4px solid rgb(223, 0, 20);}
.hf-family .hf-learning-question small{font-size: 9px; letter-spacing: 0.13em;}
.hf-family .hf-learning-question strong{display: block; font-size: 31px; letter-spacing: -0.035em; line-height: 1.2; margin-top: 14px; padding-right: 25px;}
.hf-family .hf-learning-question svg{position: absolute; right: 24px; bottom: 28px; color: rgb(220, 0, 22);}
.hf-family .learning-note{position: absolute; right: 0px; bottom: 6px; font-size: 9px; writing-mode: vertical-rl; letter-spacing: 0.05em; transform: translateX(10px);}
.hf-family .hf-editorial-wall{height: 100%; position: relative; padding: 0px 110px 0px 0px;}
.hf-family .hf-editorial-heading{position: relative; font-size: 87px; font-weight: 720; line-height: 1; letter-spacing: -0.065em; z-index: 3; display: flex; flex-direction: column; gap: 4px;}
.hf-family .hf-editorial-heading em{font-style: normal; color: rgb(232, 0, 25); align-self: flex-end; position: relative; z-index: 4;}
.hf-family .hf-editorial-frame{position: absolute; inset: 148px 10px 0px 0px; transform: rotate(-3deg); border: 9px solid rgb(234, 229, 219); box-shadow: rgba(0, 0, 0, 0.4) 0px 20px 50px;}
.hf-family .hf-editorial-frame img{height: 100%; width: 100%; object-fit: cover;}
.hf-family .editorial-side{position: absolute; right: 0px; top: 17px; border-left: 2px solid rgb(223, 0, 20); padding-left: 15px; width: 100px;}
.hf-family .editorial-side b{font-size: 8px; letter-spacing: 0.1em; display: block; margin-bottom: 15px;}
.hf-family .editorial-side span{font-size: 18px; line-height: 1.3; letter-spacing: -0.025em; color: rgb(201, 203, 208);}
.hf-family .build-studio{height: 100%; position: relative; background: rgb(242, 238, 229); box-shadow: rgba(0, 0, 0, 0.467) 0px 25px 60px; border-radius: 8px; color: rgb(36, 42, 46); padding: 22px; transform: perspective(1600px) rotateY(-5deg);}
.hf-family .build-title{display: flex; align-items: center; justify-content: space-between; padding: 5px 0px 23px; gap: 20px;}
.hf-family .build-title small{font-size: 8px; letter-spacing: 0.11em; color: rgb(96, 101, 106);}
.hf-family .build-title > strong{font-size: 15px;}
.hf-family .build-composition{height: 280px; background: rgb(32, 39, 43); color: rgb(242, 238, 229); display: flex; position: relative; overflow: hidden;}
.hf-family .build-copy{padding: 30px; position: relative; z-index: 2; width: 60%;}
.hf-family .build-copy small{font-size: 8px; letter-spacing: 0.12em; color: rgb(205, 208, 209);}
.hf-family .build-copy strong{display: block; font-size: 41px; letter-spacing: -0.045em; line-height: 1.08; margin: 27px 0px 25px;}
.hf-family .build-copy > span{background: rgb(220, 0, 21); display: inline-flex; align-items: center; gap: 20px; padding: 11px 15px; font-size: 9px;}
.hf-family .build-copy svg{width: 13px; height: 13px;}
.hf-family .build-visual{position: absolute; right: 0px; top: 0px; bottom: 0px; width: 49%; overflow: hidden; background: radial-gradient(at 30% 60%, rgb(98, 68, 74), rgb(35, 40, 45) 70%);}
.hf-family .build-visual > span{position: absolute; width: 170px; height: 170px; top: 60px; right: 55px; border-radius: 50%; background: radial-gradient(at 30% 25%, rgb(255, 57, 71), rgb(208, 0, 22) 65%, rgb(147, 0, 18)); box-shadow: rgba(0, 0, 0, 0.333) 10px 24px 25px; z-index: 2;}
.hf-family .build-visual > i{position: absolute; right: 0px; top: 8px; height: 340px; width: 130px; border: 26px solid rgb(236, 229, 212); border-radius: 100px; rotate: 30deg;}
.hf-family .build-visual > b{position: absolute; bottom: 20px; width: 110%; height: 3px; rotate: -32deg; background: rgba(245, 238, 221, 0.42); right: -15px; z-index: 3;}
.hf-family .build-cards{display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 19px;}
.hf-family .build-cards > span{display: grid; gap: 14px; background: rgb(255, 252, 247); border: 1px solid rgb(216, 213, 206); padding: 16px;}
.hf-family .build-cards small{font-size: 9px; color: rgb(197, 0, 22);}
.hf-family .build-cards strong{font-size: 13px; letter-spacing: -0.02em;}
.hf-family .build-cards i{height: 3px; background: rgb(216, 212, 204); display: block;}
.hf-family .build-signature{display: flex; align-items: center; justify-content: space-between; padding-top: 17px; font-size: 12px; color: rgb(99, 103, 106);}
.hf-family .build-signature b{font-size: 30px; color: rgb(213, 0, 22); letter-spacing: -0.07em;}
.hf-family .project-exhibition{height: 100%; position: relative;}
.hf-family .exhibit-main{position: absolute; top: 0px; left: 0px; width: 82%; padding: 15px; background: rgb(238, 234, 224); color: rgb(37, 40, 43); box-shadow: rgba(0, 0, 0, 0.4) 0px 20px 50px; transform: rotate(-3deg); border-radius: 6px;}
.hf-family .exhibit-main img,.hf-family  .exhibit-secondary img{width: 100%; aspect-ratio: 16 / 9; object-fit: contain;}
.hf-family .exhibit-main > span,.hf-family  .exhibit-secondary > span{display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 600; padding: 12px 2px 0px;}
.hf-family .exhibit-main svg,.hf-family  .exhibit-secondary svg{color: rgb(216, 0, 21); width: 18px; height: 18px;}
.hf-family .exhibit-secondary{position: absolute; bottom: 0px; right: 0px; width: 62%; padding: 11px; background: rgb(245, 240, 232); color: rgb(37, 40, 43); box-shadow: rgba(0, 0, 0, 0.533) 0px 20px 50px; transform: rotate(4deg); border-radius: 5px;}
.hf-family .exhibit-label{position: absolute; left: 0px; bottom: 0px; width: 34%;}
.hf-family .exhibit-label strong{display: block; font-size: 32px; line-height: 1.12; letter-spacing: -0.045em;}
.hf-family .exhibit-label > span{display: block; font-size: 10px; margin-top: 18px; color: rgb(201, 205, 210);}
.hf-family .hf-agency-sculpture{height: 100%; position: relative;}
.hf-family.hf-direction-two .hf-agency-sculpture .hf-agency-orbit{width: 720px; height: 660px; top: -88px;}
.hf-family.hf-direction-two .hf-agency-sculpture .hf-agency-az{width: 136px; height: 136px; top: 160px;}
.hf-family .agency-statement{position: absolute; bottom: 0px; right: 0px; font-size: 22px; line-height: 1.55; letter-spacing: -0.03em; background: linear-gradient(90deg, rgba(20, 21, 27, 0.867), rgba(20, 21, 27, 0.333)); border-left: 3px solid rgb(223, 0, 20); padding: 13px 22px;}
.hf-family .agency-statement strong{font-weight: 550;}
.hf-family.hf-direction-two .journal-card > img{height: 237px;}
.hf-family.hf-direction-two .hf-journal-copy{padding: 20px 25px;}
.hf-family.hf-direction-two .hf-journal-copy h2{font-size: 25px; margin: 16px 0px;}
.hf-family .company-statement{height: 100%; position: relative; padding: 10px 0px 0px 50px;}
.hf-family .company-mark{width: 90px; height: 90px;}
.hf-family .company-form{position: absolute; right: 0px; top: 27px; font-size: 15px; letter-spacing: 0.2em; color: rgb(184, 189, 198); writing-mode: vertical-rl;}
.hf-family .company-statement h2{font-size: 110px; font-weight: 650; letter-spacing: -0.065em; line-height: 1; margin: 23px 0px 26px;}
.hf-family .company-line{width: 60px; height: 4px; background: rgb(224, 0, 24); margin-bottom: 23px;}
.hf-family .company-place{font-size: 25px; display: block; margin-bottom: 13px;}
.hf-family .company-statement > small{font-size: 10px; letter-spacing: 0.2em; color: rgb(197, 201, 206);}
.hf-family .transparency-study{height: 100%; position: relative; perspective: 1200px;}
.hf-family .glass-sheet{position: absolute; top: 9px; left: 4%; width: 53%; height: 89%; border: 1px solid rgba(196, 203, 208, 0.392); background: linear-gradient(135deg, rgba(169, 176, 184, 0.18), rgba(39, 43, 50, 0.25)); box-shadow: rgba(0, 0, 0, 0.333) 0px 20px 55px; border-radius: 13px; padding: 26px; transform: rotateY(-18deg) rotateZ(-9deg);}
.hf-family .glass-sheet > span{font-size: 13px; color: rgb(187, 195, 204); letter-spacing: 0.12em;}
.hf-family .sheet-two{left: 24%; top: 14px; background: linear-gradient(145deg, rgba(151, 0, 22, 0.9), rgba(58, 23, 40, 0.69)); transform: rotateY(-18deg) rotateZ(-1deg); border-color: rgba(237, 40, 58, 0.5);}
.hf-family .sheet-three{left: 43%; top: 23px; background: linear-gradient(135deg, rgba(229, 228, 218, 0.92), rgba(174, 180, 183, 0.85)); color: rgb(32, 37, 42); transform: rotateY(-18deg) rotateZ(8deg);}
.hf-family .sheet-three b{display: block; font-size: 49px; letter-spacing: -0.06em; margin-top: 125px;}
.hf-family .sheet-three > span{font-size: 7px; display: block; margin-top: 14px; color: rgb(80, 86, 90);}
.hf-family .sheet-three > i{display: block; margin-top: 35px; background: rgba(110, 115, 120, 0.36); height: 3px; width: 100%;}
.hf-family .sheet-three > i + i{margin-top: 12px; width: 80%;}
.hf-family .sheet-three > i:last-child{width: 55%;}
.hf-family .transparency-caption{position: absolute; bottom: 0px; right: 5px; font-size: 16px; color: rgb(208, 211, 215);}
.hf-family .hf-index-wall{padding: 0px 0px 0px 30px; position: relative; height: 100%;}
.hf-family .hf-index-top{display: flex; align-items: center; justify-content: space-between; margin-bottom: 25px;}
.hf-family .hf-index-top > span{font-size: 10px; letter-spacing: 0.13em; color: rgb(193, 200, 208);}
.hf-family .hf-index-top b{font-size: 50px; letter-spacing: -0.055em; font-weight: 650;}
.hf-family .hf-index-top b span{color: rgb(232, 0, 26); padding: 0px 10px; font-size: 38px;}
.hf-family .hf-index-wall > a{display: flex; align-items: center; gap: 25px; padding: 21px 10px; border-top: 1px solid rgba(103, 110, 117, 0.35);}
.hf-family .hf-index-wall > a:last-child{border-bottom: 1px solid rgba(103, 110, 117, 0.35);}
.hf-family .hf-index-wall small{font-size: 12px; color: rgb(197, 200, 206);}
.hf-family .hf-index-wall strong{font-size: 33px; font-weight: 550; letter-spacing: -0.035em;}
.hf-family .hf-index-wall svg{margin-left: auto; color: rgb(232, 0, 27);}
@media (max-width: 1450px) and (min-width: 1101px){.hf-family.hf-direction-two .hf-baseline-inner > .hf-strip-item{gap: 15px; padding: 0px 22px;}
.hf-family.hf-direction-two .hf-strip-item:first-child{padding-left: 0px;}
.hf-family.hf-direction-two .hf-strip-item:last-child{padding-right: 0px;}
.hf-family .hf-strip-copy strong{font-size: 16px;}
.hf-family .hf-strip-copy > span{font-size: 12px;}
.hf-family .hf-strip-number{font-size: 51px;}
.hf-family .hf-strip-portrait{width: 60px; height: 60px;}
.hf-family.hf-direction-two.hf-hero-home h1{font-size: 60px;}
.hf-family .hf-home-panorama{right: -140px;}
.hf-family.hf-direction-two .hf-visual{width: 48%; top: 115px; height: 555px;}
.hf-family .hf-discipline-title{font-size: 44px;}
.hf-family .hf-discipline-lines > div{font-size: 21px;}
.hf-family .hf-type-hero{font-size: 330px; top: -30px;}
.hf-family .hf-brand-ticket{width: 300px; padding: 24px;}
.hf-family .hf-brand-ticket strong{font-size: 32px;}
.hf-family .hf-brand-colours i{width: 38px; height: 60px;}
.hf-family .hf-type-small{font-size: 28px; bottom: 100px;}
.hf-family .automation-input > span,.hf-family  .automation-output > span{min-width: 145px; font-size: 12px; padding: 17px 12px; gap: 9px;}
.hf-family .automation-core{width: 140px; height: 150px;}
.hf-family .automation-core > b{font-size: 38px;}
.hf-family .hf-learning-question strong{font-size: 27px;}
.hf-family .hf-editorial-heading{font-size: 73px;}
.hf-family .build-copy{padding: 25px;}
.hf-family .build-copy strong{font-size: 32px;}
.hf-family .build-visual > span{right: 30px; width: 140px; height: 140px; top: 70px;}
.hf-family .exhibit-label strong{font-size: 26px;}
.hf-family .company-statement h2{font-size: 90px;}
.hf-family .sheet-three b{font-size: 39px;}
.hf-family .hf-index-wall strong{font-size: 28px;}}
@media (max-width: 1100px){.hf-family.hf-direction-two .hf-hero-stage{height: auto;}
.hf-family.hf-direction-two .hf-hero-inner{padding-bottom: 55px;}
.hf-family.hf-direction-two .hf-hero-copy{width: 100%; top: auto; transform: none;}
.hf-family.hf-direction-two .hf-visual,.hf-family.hf-direction-two .hf-visual[data-rail="none"]{position: relative; top: auto; bottom: auto; height: 590px; width: 100%; max-width: 740px;}
.hf-family.hf-direction-two .hf-visual[data-rail="none"]{height: 550px;}
.hf-family.hf-direction-two.hf-hero-home .hf-visual{position: relative; top: auto; bottom: auto; height: 530px; width: 100%;}
.hf-family.hf-direction-two.hf-hero-home .hf-art{display: block;}
.hf-family.hf-direction-two.hf-hero-home .hf-hero-copy{width: 100%;}
.hf-family.hf-direction-two.hf-hero-home h1{font-size: 64px;}
.hf-family .hf-home-panorama{height: 650px; width: 1100px; right: -75px; top: auto; bottom: 0px; mask-image: linear-gradient(0deg, rgb(0, 0, 0) 78%, transparent);}
.hf-family.hf-direction-two .hf-baseline{height: auto; min-height: 144px;}
.hf-family.hf-direction-two .hf-baseline-inner{grid-template-columns: 1fr; padding: 18px 0px; gap: 0px;}
.hf-family.hf-direction-two .hf-baseline-inner > .hf-strip-item{min-height: 94px; height: auto; padding: 20px 0px; gap: 20px;}
.hf-family.hf-direction-two .hf-strip-item + .hf-strip-item{border-left: 0px; border-top: 1px solid rgba(115, 121, 132, 0.26);}
.hf-family .hf-strip-copy strong{font-size: 18px;}
.hf-family .hf-strip-copy > span{font-size: 14px;}
.hf-family .hf-strip-number{min-width: 84px; font-size: 54px;}
.hf-family .hf-strip-icon,.hf-family  .hf-location-dot{width: 70px;}
.hf-family.hf-direction-two .journal-card > img{height: 245px;}
.hf-family.hf-direction-two .hf-agency-sculpture .hf-agency-orbit{top: -67px;}
.hf-family.hf-direction-two .hf-agency-sculpture .hf-agency-az{top: 180px;}}
@media (max-width: 600px){.hf-family.hf-direction-two .hf-hero-inner{gap: 25px; padding-bottom: 40px;}
.hf-family.hf-direction-two .hf-hero-copy{padding-top: 12px;}
.hf-family.hf-direction-two .hf-visual{height: 380px; gap: 17px;}
.hf-family.hf-direction-two .hf-visual[data-rail="none"]{height: 330px;}
.hf-family.hf-direction-two.hf-hero-home h1{font-size: 43px;}
.hf-family.hf-direction-two.hf-hero-home .hf-visual{height: 350px;}
.hf-family .hf-home-panorama{height: 400px; width: 710px; right: -90px; bottom: 30px; object-fit: cover; object-position: right center;}
.hf-family.hf-direction-two.hf-hero-home .hf-intro{font-size: 16px;}
.hf-family .home-note{font-size: 11px; margin-top: 24px; line-height: 1.6; max-width: 300px;}
.hf-family.hf-direction-two .hf-scene-rail{height: 59px; font-size: 10px; padding: 9px 13px; gap: 5px;}
.hf-family.hf-direction-two .hf-scene-rail > span:first-child{font-size: 9px;}
.hf-family.hf-direction-two .hf-baseline-inner > .hf-strip-item{padding: 18px 0px; min-height: 93px; gap: 15px;}
.hf-family .hf-strip-copy{gap: 5px;}
.hf-family .hf-strip-copy strong{font-size: 15px;}
.hf-family .hf-strip-copy > span{font-size: 12px;}
.hf-family .hf-strip-portrait{width: 56px; height: 56px;}
.hf-family .hf-strip-number{min-width: 77px; font-size: 47px; letter-spacing: -0.075em;}
.hf-family .hf-strip-icon,.hf-family  .hf-location-dot{width: 56px;}
.hf-family .hf-strip-icon svg{width: 26px; height: 26px;}
.hf-family.hf-direction-two .hf-back-word{font-size: 20vw; bottom: 0px;}
.hf-family .hf-discipline-wall{padding: 0px 5px;}
.hf-family .hf-discipline-title{font-size: 32px; margin: 0px 0px 17px;}
.hf-family .hf-discipline-lines{gap: 0px 20px;}
.hf-family .hf-discipline-lines > div{padding: 15px 0px; gap: 11px; font-size: 17px;}
.hf-family .hf-discipline-lines svg{width: 21px; height: 21px;}
.hf-family .hf-discipline-lines i{width: 4px; height: 4px;}
.hf-family .hf-discipline-seal{margin-top: 23px; gap: 12px;}
.hf-family .hf-discipline-seal img{width: 38px; height: 38px;}
.hf-family .hf-discipline-seal span{font-size: 7px;}
.hf-family .hf-type-hero{font-size: 210px; top: -26px; left: 2px; line-height: 1.1;}
.hf-family .hf-type-hero > span{transform: translate(-10px, 20px);}
.hf-family .hf-type-hero > i{width: 230px; height: 140px; left: 15px; top: 60px; border-width: 1px;}
.hf-family .hf-brand-ticket{left: 2px; bottom: 4px; width: 205px; padding: 18px; transform: rotate(4deg);}
.hf-family .hf-brand-ticket small{font-size: 5px;}
.hf-family .hf-brand-ticket strong{font-size: 24px; margin: 11px 0px 14px;}
.hf-family .hf-brand-ticket > span{font-size: 6px;}
.hf-family .hf-brand-colours{right: 0px; bottom: 12px; gap: 6px;}
.hf-family .hf-brand-colours i{width: 29px; height: 44px;}
.hf-family .hf-type-small{font-size: 18px; right: 0px; bottom: 73px;}
.hf-family .web-showcase{gap: 14px;}
.hf-family .web-showcase .project-image{padding: 11px; aspect-ratio: 1.8 / 1;}
.hf-family .web-showcase .project-caption{padding: 13px;}
.hf-family .web-showcase .project-caption strong{font-size: 19px;}
.hf-family .showcase-links{font-size: 9px; gap: 15px; padding-left: 0px;}
.hf-family.hf-direction-two .hf-apps-scene .hf-cube{width: 360px; max-width: 110%; max-height: 340px; top: -12px;}
.hf-family .automation-studio{padding-bottom: 35px; gap: 5px;}
.hf-family .automation-input,.hf-family  .automation-output{gap: 47px;}
.hf-family .automation-input > span,.hf-family  .automation-output > span{font-size: 8px; padding: 12px 8px; min-width: 95px; gap: 6px; border-radius: 6px;}
.hf-family .automation-input svg{width: 14px; height: 14px;}
.hf-family .automation-output svg{width: 11px; height: 11px;}
.hf-family .automation-core{width: 97px; height: 113px; border-radius: 17px; box-shadow: rgb(96, 12, 27) 0px 8px 0px, rgba(173, 0, 20, 0.17) 0px 20px 40px;}
.hf-family .automation-core > svg{width: 29px; height: 29px;}
.hf-family .automation-core > b{font-size: 30px;}
.hf-family .automation-core > span{font-size: 4px; letter-spacing: 0px; margin-top: 8px;}
.hf-family .automation-studio > p{font-size: 11px;}
.hf-family .hf-learning-photo{height: 215px; width: 94%;}
.hf-family .hf-learning-question{bottom: 5px; padding: 17px; width: 88%; border-left-width: 3px;}
.hf-family .hf-learning-question small{font-size: 6px;}
.hf-family .hf-learning-question strong{font-size: 21px; margin-top: 11px; padding-right: 16px;}
.hf-family .hf-learning-question svg{width: 17px; right: 13px; bottom: 18px;}
.hf-family .learning-note{display: none;}
.hf-family .hf-editorial-wall{padding-right: 65px;}
.hf-family .hf-editorial-heading{font-size: 51px; gap: 5px;}
.hf-family .hf-editorial-frame{inset: 90px 8px 0px 0px; border-width: 6px;}
.hf-family .editorial-side{width: 62px; padding-left: 8px; top: 8px; border-left-width: 1px;}
.hf-family .editorial-side b{font-size: 5px; margin-bottom: 9px;}
.hf-family .editorial-side span{font-size: 12px;}
.hf-family.hf-direction-two.hf-hero-offer .hf-visual{height: 365px;}
.hf-family .build-studio{padding: 13px;}
.hf-family .build-title{padding: 2px 0px 14px; gap: 9px;}
.hf-family .build-title small{font-size: 4.5px;}
.hf-family .build-title > strong{font-size: 10px;}
.hf-family .build-composition{height: 190px;}
.hf-family .build-copy{padding: 20px; width: 66%;}
.hf-family .build-copy small{font-size: 5px;}
.hf-family .build-copy strong{font-size: 25px; margin: 20px 0px;}
.hf-family .build-copy > span{font-size: 6px; padding: 8px 10px; gap: 10px;}
.hf-family .build-copy svg{width: 10px; height: 10px;}
.hf-family .build-visual{width: 46%;}
.hf-family .build-visual > span{width: 90px; height: 90px; right: 18px; top: 57px;}
.hf-family .build-visual > i{width: 90px; height: 220px; top: -10px; right: 0px; border-width: 16px;}
.hf-family .build-cards{gap: 8px; margin-top: 12px;}
.hf-family .build-cards > span{padding: 10px 7px; gap: 10px;}
.hf-family .build-cards small{font-size: 6px;}
.hf-family .build-cards strong{font-size: 8px;}
.hf-family .build-cards i{height: 2px;}
.hf-family .build-signature{padding-top: 10px; font-size: 8px;}
.hf-family .build-signature b{font-size: 22px;}
.hf-family .exhibit-main{padding: 9px; top: 0px; width: 88%;}
.hf-family .exhibit-main > span,.hf-family  .exhibit-secondary > span{font-size: 8px; padding-top: 8px;}
.hf-family .exhibit-main svg,.hf-family  .exhibit-secondary svg{width: 12px; height: 12px;}
.hf-family .exhibit-secondary{width: 66%; padding: 7px; bottom: 0px;}
.hf-family .exhibit-label{width: 30%; bottom: 7px;}
.hf-family .exhibit-label strong{font-size: 20px;}
.hf-family .exhibit-label > span{font-size: 6px; margin-top: 12px;}
.hf-family.hf-direction-two .hf-agency-sculpture .hf-agency-orbit{width: 440px; height: 400px; top: -55px;}
.hf-family.hf-direction-two .hf-agency-sculpture .hf-agency-az{width: 80px; height: 80px; top: 94px;}
.hf-family .agency-statement{font-size: 16px; padding: 9px 14px; bottom: 0px; border-left-width: 2px;}
.hf-family.hf-direction-two.hf-hero-journal .hf-visual{height: 417px;}
.hf-family.hf-direction-two .journal-card > img{height: 150px;}
.hf-family.hf-direction-two .hf-journal-copy{padding: 15px;}
.hf-family.hf-direction-two .hf-journal-copy h2{font-size: 18px; margin: 13px 0px;}
.hf-family .company-statement{padding: 0px 0px 0px 13px;}
.hf-family .company-mark{width: 50px; height: 50px;}
.hf-family .company-form{font-size: 10px; top: 15px;}
.hf-family .company-statement h2{font-size: 70px; margin: 16px 0px 20px;}
.hf-family .company-line{width: 35px; height: 2px; margin-bottom: 14px;}
.hf-family .company-place{font-size: 17px; margin-bottom: 8px;}
.hf-family .company-statement > small{font-size: 7px;}
.hf-family .glass-sheet{padding: 15px; border-radius: 8px; width: 55%; top: 0px; height: 88%;}
.hf-family .glass-sheet > span{font-size: 8px;}
.hf-family .sheet-two{top: 6px;}
.hf-family .sheet-three{top: 13px; left: 42%; padding: 14px;}
.hf-family .sheet-three b{font-size: 29px; margin-top: 73px;}
.hf-family .sheet-three > span{font-size: 5px; letter-spacing: 0.025em; margin-top: 9px;}
.hf-family .sheet-three > i{margin-top: 25px; height: 2px;}
.hf-family .sheet-three > i + i{margin-top: 8px;}
.hf-family .transparency-caption{font-size: 10px; right: 0px;}
.hf-family .hf-index-wall{padding: 0px 4px;}
.hf-family .hf-index-top{margin-bottom: 17px;}
.hf-family .hf-index-top > span{font-size: 7px; letter-spacing: 0.07em;}
.hf-family .hf-index-top b{font-size: 33px;}
.hf-family .hf-index-top b span{font-size: 25px; padding: 0px 7px;}
.hf-family .hf-index-wall > a{padding: 14px 2px; gap: 18px;}
.hf-family .hf-index-wall small{font-size: 9px;}
.hf-family .hf-index-wall strong{font-size: 23px;}
.hf-family .hf-index-wall svg{width: 18px; height: 18px;}}
.hf-family.hf-direction-two .hf-trails{z-index: 1; contain: strict;}
.hf-family.hf-direction-two .hf-trails .hf-moving-point{stroke: none;}
.hf-family.hf-direction-two .hf-cube{animation: auto ease 0s 1 normal none running none;}
.hf-family.hf-direction-two.hf-hero-home .hf-trails{mask-image: linear-gradient(90deg, rgb(0, 0, 0), transparent 59%);}
@media (max-width: 1100px){.hf-family.hf-direction-two .hf-trails{top: auto; bottom: 0px; height: 650px; mask-image: none;}}
@media (max-width: 600px){.hf-family.hf-direction-two .hf-trails{height: 460px;}
.hf-family.hf-direction-two.hf-hero-home .hf-trails{mask-image: linear-gradient(90deg, rgb(0, 0, 0), transparent 33%);}}
@media (prefers-reduced-motion: reduce){.hf-family.hf-direction-two .hf-moving-point{display: none;}}
.hf-family.hf-direction-three .hf-back-word{letter-spacing: 0.015em; -webkit-text-stroke: 1px rgba(197, 157, 164, 0.09); text-shadow: none; font-weight: 650; white-space: nowrap;}
.hf-family.hf-direction-three .hf-hero-copy{width: 44%;}
.hf-family.hf-direction-three .hf-visual{top: 110px; height: 570px;}
.hf-family.hf-direction-three .hf-art{margin-top: 0px; height: 100%;}
.hf-family.hf-direction-three .hf-hero-copy h1{font-family: Lexend, Arial, sans-serif;}
.hf-family.hf-direction-three .hf-scene-rail{flex: 0 0 auto; min-height: 58px; height: auto; padding: 15px 22px; line-height: 1.4; gap: 20px;}
.hf-family.hf-direction-three .hf-scene-rail > span:first-child{display: flex; align-items: center; gap: 12px;}
.hf-family.hf-direction-three .hf-red-dot{width: 10px; height: 10px; background: rgb(224, 0, 22); border-radius: 50%; flex: 0 0 auto;}
.hf-family.hf-direction-three .hf-scene-rail > span:last-child{text-align: right;}
.hf-family.hf-direction-three .hf-thought{position: relative; padding: 0px 0px 0px 18px; margin-top: 26px; border-left: 3px solid rgb(223, 0, 20); max-width: 480px; background: none;}
.hf-family.hf-direction-three .hf-thought small{color: rgb(247, 245, 240); display: block; font-size: 12px; font-weight: 650; letter-spacing: 0.07em; line-height: 1.5;}
.hf-family.hf-direction-three .hf-thought p{color: rgb(247, 245, 240); font-size: 17px; line-height: 1.55; margin: 6px 0px 0px;}
.hf-family.hf-direction-three .hf-baseline{height: 144px;}
.hf-family.hf-direction-three .hf-strip-item{min-width: 0px;}
.hf-family.hf-direction-three .hf-strip-copy strong{font-size: 19px;}
.hf-family.hf-direction-three .hf-strip-copy > span{font-size: 14px;}
.hf-family.hf-direction-three .hf-strip-item strong{line-height: 1.4;}
.hf-family.hf-direction-three .hf-strip-number{font-size: 58px;}
.hf-family.hf-direction-three.hf-hero-home .hf-home-panorama{position: absolute; width: 100%; height: 100%; max-width: none; inset: 0px; object-fit: cover; object-position: center center; opacity: 1; mask-image: none;}
.hf-family.hf-direction-three.hf-hero-home .hf-scene-background{background: rgb(10, 14, 16);}
.hf-family.hf-direction-three.hf-hero-home .hf-hero-stage::after{content: ""; position: absolute; inset: 0px; background: linear-gradient(90deg, rgba(9, 13, 15, 0.96), rgba(9, 13, 15, 0.76) 29%, rgba(9, 13, 15, 0.2) 48%, transparent 68%); pointer-events: none; z-index: 1;}
.hf-family.hf-direction-three.hf-hero-home .hf-hero-inner{z-index: 3;}
.hf-family.hf-direction-three.hf-hero-home .hf-hero-copy{width: 45%;}
.hf-family.hf-direction-three.hf-hero-home .hf-visual{top: auto; bottom: 50px; height: 65px;}
.hf-family.hf-direction-three.hf-hero-home .hf-art{display: flex; align-items: flex-end;}
.hf-family.hf-direction-three.hf-hero-home .hf-scene-rail{width: 100%; background: rgb(24, 29, 34);}
.hf-family.hf-direction-three.hf-hero-home .hf-trails{z-index: 2; opacity: 0.75;}
.hf-family.hf-direction-three .hf-home-energy{position: absolute; inset: 0px; pointer-events: none; z-index: 2;}
.hf-family.hf-direction-three .hf-home-energy i{position: absolute; width: 24px; height: 24px; border-radius: 50%; background: radial-gradient(circle, rgb(255, 244, 223) 0px, rgb(255, 244, 223) 8%, rgb(255, 49, 72) 12%, rgba(223, 0, 20, 0.333) 33%, transparent 72%);}
.hf-family.hf-direction-three .hf-home-energy i:nth-child(1){left: 64%; top: 46%;}
.hf-family.hf-direction-three .hf-home-energy i:nth-child(2){left: 89%; top: 31%;}
.hf-family.hf-direction-three .hf-home-energy i:nth-child(3){left: 75%; top: 74%;}
.hf-family.hf-direction-three.hf-hero-brand .hf-identity-studio{height: 100%;}
.hf-family.hf-direction-three.hf-hero-brand .hf-brand-ticket{bottom: 20px;}
.hf-family.hf-direction-three.hf-hero-brand .hf-brand-colours{bottom: 45px;}
.hf-family.hf-direction-three.hf-hero-apps .hf-cube{width: 100%; max-width: 780px; height: auto; max-height: 590px; object-fit: contain; top: -15px;}
.hf-family.hf-direction-three .hf-feature-carousel{display: flex; flex-direction: column; width: 100%; height: auto; gap: 20px;}
.hf-family.hf-direction-three .hf-browser-feature{flex-shrink: 0; overflow: hidden; border: 1px solid rgb(80, 84, 90); border-radius: 12px; background: rgb(24, 29, 34); box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 45px;}
.hf-family.hf-direction-three .hf-browser-feature > .hf-scene-rail{border-width: 0px 0px 1px; border-style: none none solid; border-color: currentcolor currentcolor rgb(54, 59, 64); border-image: none; border-radius: 0px;}
.hf-family.hf-direction-three .hf-slide-stack{position: relative;}
.hf-family.hf-direction-three .hf-feature-slide[hidden]{display: none !important;}
.hf-family.hf-direction-three .hf-browser-shot{padding: 19px 22px; background: rgb(240, 237, 231); aspect-ratio: 2.1 / 1; display: flex; align-items: center; justify-content: center;}
.hf-family.hf-direction-three .hf-browser-shot img{display: block; width: 100%; height: 100%; object-fit: contain;}
.hf-family.hf-direction-three .hf-feature-caption{padding: 20px 25px; min-height: 101px; display: flex; align-items: center; justify-content: space-between; gap: 15px; color: rgb(247, 245, 240);}
.hf-family.hf-direction-three .hf-feature-caption small{font-size: 12px; color: rgb(187, 192, 197);}
.hf-family.hf-direction-three .hf-feature-caption h2{font-size: 27px; margin: 8px 0px 0px; line-height: 1.2;}
.hf-family.hf-direction-three .hf-caption-arrow svg{width: 26px; height: 26px; stroke: rgb(223, 0, 20);}
.hf-family.hf-direction-three .hf-choice-cards{display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 12px; margin: 0px;}
.hf-family.hf-direction-three .hf-choice-cards button{font: inherit; position: relative; overflow: hidden; display: flex; align-items: center; gap: 10px; min-width: 0px; min-height: 79px; padding: 17px 15px; border: 1px solid rgb(80, 84, 90); border-radius: 9px; background: rgb(24, 29, 34); color: rgb(247, 245, 240); text-align: left; cursor: pointer;}
.hf-family.hf-direction-three .hf-choice-cards strong{font-size: 15px; line-height: 1.45;}
.hf-family.hf-direction-three .hf-choice-number{flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; background: rgb(54, 60, 67); display: grid; place-items: center; font-size: 11px; font-weight: 600;}
.hf-family.hf-direction-three .hf-choice-cards button[aria-selected="true"]{border-color: rgb(223, 0, 20); background: rgb(53, 27, 33);}
.hf-family.hf-direction-three .hf-choice-cards button[aria-selected="true"] .hf-choice-number{background: rgb(223, 0, 20);}
.hf-family.hf-direction-three .hf-choice-progress{position: absolute; inset: auto 0px 0px; height: 3px; background: rgb(223, 0, 20); transform: scaleX(0); transform-origin: left center;}
.hf-family.hf-direction-three .hf-choice-cards button:focus-visible{outline: rgb(247, 245, 240) solid 3px; outline-offset: 3px;}
.hf-family.hf-direction-three .hf-art-ai{display: flex; flex-direction: column; gap: 30px;}
.hf-family.hf-direction-three .hf-process-diagram{position: relative; flex: 1 1 0%; min-height: 0px; display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; gap: 42px;}
.hf-family.hf-direction-three .hf-process-inputs,.hf-family.hf-direction-three .hf-process-outputs{display: flex; flex-direction: column; height: 78%; justify-content: space-between; z-index: 2;}
.hf-family.hf-direction-three .hf-process-node{min-height: 76px; padding: 18px; display: flex; align-items: center; gap: 10px; border: 1px solid rgb(65, 71, 78); border-radius: 10px; background: rgb(24, 30, 34); color: rgb(247, 245, 240); font-size: 16px; font-weight: 550;}
.hf-family.hf-direction-three .hf-process-node svg{width: 23px; height: 23px; flex: 0 0 auto; color: rgb(188, 197, 205);}
.hf-family.hf-direction-three .hf-process-outputs .hf-process-node{justify-content: space-between;}
.hf-family.hf-direction-three .hf-process-outputs svg{color: rgb(223, 0, 20);}
.hf-family.hf-direction-three .hf-process-core{position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 197px; border-radius: 26px; background: linear-gradient(135deg, rgb(242, 9, 39), rgb(196, 0, 24)); box-shadow: rgb(119, 7, 25) 0px 15px 0px, rgba(223, 0, 20, 0.17) 0px 24px 65px; transform: rotate(-5deg); border: 1px solid rgb(255, 90, 102);}
.hf-family.hf-direction-three .hf-process-core svg{width: 44px; height: 44px; color: white;}
.hf-family.hf-direction-three .hf-process-core b{font-family: Lexend, Arial, sans-serif; font-size: 53px; line-height: 1.2; margin: 9px 0px;}
.hf-family.hf-direction-three .hf-process-dot circle{stroke: none;}
.hf-family.hf-direction-three .hf-process-core span{font-size: 8px; letter-spacing: 0.08em; text-align: center;}
.hf-family.hf-direction-three .hf-process-wires{position: absolute; inset: 0px; width: 100%; height: 100%; overflow: visible; z-index: 1;}
.hf-family.hf-direction-three .hf-process-wires path{fill: none; stroke: rgb(186, 23, 48); stroke-width: 1.2;}
.hf-family.hf-direction-three .hf-process-wires g{pointer-events: none;}
.hf-family.hf-direction-three.hf-hero-learn .hf-visual{display: flex; flex-direction: column; gap: 25px;}
.hf-family.hf-direction-three.hf-hero-learn .hf-art{flex: 1 1 0%; min-height: 0px;}
.hf-family.hf-direction-three.hf-hero-learn .hf-learning-story{height: 100%;}
.hf-family.hf-direction-three .hf-learning-photo{overflow: hidden;}
.hf-family.hf-direction-three .hf-learning-signal{position: absolute; inset: 0px; pointer-events: none;}
.hf-family.hf-direction-three .hf-learning-signal i{position: absolute; left: 36%; top: 37%; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.4); box-shadow: rgba(228, 0, 37, 0.25) 0px 0px 18px;}
.hf-family.hf-direction-three .hf-learning-signal i:nth-child(2){left: 48%; top: 40%;}
.hf-family.hf-direction-three .hf-learning-signal i:nth-child(3){left: 62%; top: 43%;}
.hf-family.hf-direction-three.hf-hero-content .hf-visual{display: flex; flex-direction: column; gap: 30px;}
.hf-family.hf-direction-three.hf-hero-content .hf-art{flex: 1 1 0%; min-height: 0px;}
.hf-family.hf-direction-three.hf-hero-content .hf-editorial-wall{height: 100%;}
.hf-family.hf-direction-three.hf-hero-content .hf-editorial-frame{inset: 75px 0px 100px; transform: rotate(-2deg);}
.hf-family.hf-direction-three.hf-hero-content .hf-editorial-heading{z-index: 4; top: 0px; font-size: 68px;}
.hf-family.hf-direction-three.hf-hero-content .hf-thought{position: absolute; bottom: 0px; right: 0px; margin: 0px; padding: 0px 18px; background: rgb(16, 19, 22);}
.hf-family.hf-direction-three.hf-hero-content .hf-thought small{font-size: 12px;}
.hf-family.hf-direction-three.hf-hero-content .hf-thought p{font-size: 23px;}
.hf-family.hf-direction-three .hf-art-offer{display: flex; flex-direction: column; gap: 24px; justify-content: center;}
.hf-family.hf-direction-three .hf-build-demo{border-radius: 12px; overflow: hidden; background: rgb(247, 245, 240); border: 1px solid rgb(98, 98, 102); box-shadow: rgba(0, 0, 0, 0.267) 0px 20px 55px;}
.hf-family.hf-direction-three .hf-demo-toolbar{height: 63px; padding: 0px 24px; background: rgb(255, 255, 255); color: rgb(32, 36, 40); display: flex; align-items: center; justify-content: space-between;}
.hf-family.hf-direction-three .hf-demo-toolbar strong{font-size: 14px;}
.hf-family.hf-direction-three .hf-demo-toolbar > div{display: flex; align-items: center; gap: 9px;}
.hf-family.hf-direction-three .hf-demo-toolbar i{height: 3px; width: 24px; background: rgb(197, 198, 202);}
.hf-family.hf-direction-three .hf-demo-toolbar span{width: 29px; height: 29px; display: grid; place-items: center; background: rgb(223, 0, 20); border-radius: 3px;}
.hf-family.hf-direction-three .hf-demo-toolbar svg{width: 17px; height: 17px; color: white; transform: rotate(-45deg);}
.hf-family.hf-direction-three .hf-demo-canvas{position: relative; background: rgb(247, 245, 240); min-height: 368px;}
.hf-family.hf-direction-three .hf-demo-idea{position: absolute; inset: 0px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 18px; color: rgb(36, 42, 46); text-align: center;}
.hf-family.hf-direction-three .hf-demo-idea > svg{width: 48px; height: 48px; color: rgb(223, 0, 20);}
.hf-family.hf-direction-three .hf-demo-idea small{font-size: 9px; letter-spacing: 0.14em;}
.hf-family.hf-direction-three .hf-demo-idea strong{max-width: 70%; font-size: 29px; line-height: 1.3;}
.hf-family.hf-direction-three .hf-demo-idea i{height: 3px; width: 50px; background: rgb(223, 0, 20);}
.hf-family.hf-direction-three .hf-demo-site{position: relative;}
.hf-family.hf-direction-three .hf-demo-hero{display: grid; grid-template-columns: 1.1fr 1fr; min-height: 245px; background: rgb(37, 44, 46);}
.hf-family.hf-direction-three .hf-demo-copy{padding: 33px 23px; color: rgb(255, 255, 255);}
.hf-family.hf-direction-three .hf-demo-copy small{font-size: 7px; letter-spacing: 0.12em;}
.hf-family.hf-direction-three .hf-demo-copy h2{font-size: 32px; line-height: 1.15; letter-spacing: -0.045em; margin: 22px 0px;}
.hf-family.hf-direction-three .hf-demo-copy h2 span{display: inline-block; clip-path: inset(0px);}
.hf-family.hf-direction-three .hf-demo-cta{background: rgb(223, 0, 20); padding: 10px 13px; font-size: 9px; display: inline-flex; align-items: center; gap: 8px;}
.hf-family.hf-direction-three .hf-demo-cta svg{width: 14px; height: 14px;}
.hf-family.hf-direction-three .hf-demo-photo{min-width: 0px; overflow: hidden;}
.hf-family.hf-direction-three .hf-demo-photo img{width: 100%; height: 100%; object-fit: cover; display: block;}
.hf-family.hf-direction-three .hf-demo-cards{display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 12px; padding: 20px;}
.hf-family.hf-direction-three .hf-demo-cards > div{border: 1px solid rgb(222, 219, 213); background: white; padding: 14px 12px; color: rgb(32, 36, 40);}
.hf-family.hf-direction-three .hf-demo-cards small{display: block; font-size: 7px; color: rgb(206, 0, 19);}
.hf-family.hf-direction-three .hf-demo-cards b{display: block; font-size: 10px; margin: 12px 0px;}
.hf-family.hf-direction-three .hf-demo-cards i{display: block; height: 3px; width: 100%; background: rgb(216, 214, 209); margin-top: 4px;}
.hf-family.hf-direction-three .hf-demo-cards i:last-child{width: 65%;}
.hf-family.hf-direction-three .hf-build-stages{display: flex; align-items: center; justify-content: space-between; padding: 0px 8px; gap: 12px; color: rgb(198, 204, 209); font-size: 13px;}
.hf-family.hf-direction-three .hf-build-stages svg{width: 18px; height: 18px; color: rgb(223, 0, 20);}
.hf-family.hf-direction-three.hf-hero-agency .hf-agency-orbit{width: 100%; max-width: none; height: 100%; object-fit: contain; top: 0px; left: 0px; transform: none;}
.hf-family.hf-direction-three .hf-site-header .hf-down{display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; width: 20px; height: 20px;}
.hf-family.hf-direction-three .hf-site-header .hf-down svg{display: block; width: 20px; height: 20px;}
.hf-family.hf-direction-three.hf-hero-agency .hf-agency-az{width: 145px; height: 145px; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.hf-family.hf-direction-three.hf-hero-agency .hf-hero-copy .hf-thought p{font-size: 21px;}
.hf-family.hf-direction-three.hf-hero-journal .hf-visual{top: 80px; height: 625px;}
.hf-family.hf-direction-three .hf-journal-feature{gap: 16px;}
.hf-family.hf-direction-three .hf-journal-slides{background: rgb(244, 241, 233); color: rgb(32, 36, 39); border-radius: 12px; border: 1px solid rgb(139, 136, 133); overflow: hidden;}
.hf-family.hf-direction-three .hf-journal-photo{width: 100%; height: 240px; display: block; object-fit: cover;}
.hf-family.hf-direction-three .hf-journal-copy{padding: 20px 25px 23px;}
.hf-family.hf-direction-three .hf-article-meta{display: flex; align-items: center; gap: 12px; color: rgb(200, 0, 21); font-size: 11px; font-weight: 600;}
.hf-family.hf-direction-three .hf-article-meta time{margin-left: auto; color: rgb(80, 93, 102); font-size: 11px; font-weight: 400;}
.hf-family.hf-direction-three .hf-article-number{width: 29px; height: 29px; border-radius: 50%; background: rgb(212, 0, 19); color: rgb(255, 255, 255); display: grid; place-items: center; flex: 0 0 auto;}
.hf-family.hf-direction-three .hf-journal-copy h2{font-size: 27px; line-height: 1.23; min-height: 67px; margin: 15px 0px 21px;}
.hf-family.hf-direction-three .hf-read-more{display: flex; align-items: center; justify-content: space-between; color: rgb(200, 0, 19); font-size: 14px; font-weight: 600;}
.hf-family.hf-direction-three .hf-read-more svg{width: 23px; height: 23px;}
.hf-family.hf-direction-three .hf-journal-feature .hf-choice-cards button{min-height: 80px;}
.hf-family.hf-direction-three .hf-legal-identity{position: relative; padding: 39px; height: 100%; display: grid; grid-template-columns: 88px 1fr; align-content: center; column-gap: 25px; background: linear-gradient(140deg, rgb(29, 34, 40), rgb(21, 24, 29)); border: 1px solid rgb(74, 78, 85); border-radius: 12px; overflow: hidden; box-shadow: rgb(139, 8, 26) 18px 18px 0px -1px, rgb(179, 21, 41) 18px 18px 0px;}
.hf-family.hf-direction-three .hf-identity-stamp img{width: 84px; height: 84px;}
.hf-family.hf-direction-three .hf-legal-heading small{font-size: 11px; color: rgb(189, 196, 203); letter-spacing: 0.1em;}
.hf-family.hf-direction-three .hf-legal-heading h2{font-size: 36px; line-height: 1.15; margin: 12px 0px 0px;}
.hf-family.hf-direction-three .hf-legal-heading h2 span{display: block; color: rgb(194, 200, 207); font-size: 19px; margin-top: 11px;}
.hf-family.hf-direction-three .hf-legal-details{grid-column: 1 / -1; margin-top: 33px;}
.hf-family.hf-direction-three .hf-legal-details > div{padding: 21px 0px; display: flex; align-items: center; justify-content: space-between; gap: 15px; border-top: 1px solid rgb(65, 68, 74);}
.hf-family.hf-direction-three .hf-legal-details small{font-size: 13px; color: rgb(183, 192, 201);}
.hf-family.hf-direction-three .hf-legal-details strong{font-size: 17px;}
.hf-family.hf-direction-three .hf-legal-edge{position: absolute; top: 0px; left: 0px; height: 3px; width: 34%; background: rgb(223, 0, 20);}
.hf-family.hf-direction-three .hf-privacy-desk{position: relative; width: 100%; height: 100%; display: grid; place-items: center;}
.hf-family.hf-direction-three .hf-privacy-orbits{position: absolute; inset: 0px;}
.hf-family.hf-direction-three .hf-privacy-orbits i{position: absolute; inset: 2% 8%; border: 1px solid rgba(221, 0, 20, 0.227); border-radius: 50%; transform: rotate(25deg);}
.hf-family.hf-direction-three .hf-privacy-orbits i:nth-child(2){inset: 12% -2%; transform: rotate(-25deg);}
.hf-family.hf-direction-three .hf-privacy-orbits i:nth-child(3){inset: -6% 20%; transform: rotate(50deg);}
.hf-family.hf-direction-three .hf-privacy-document{z-index: 2; position: relative; width: 88%; padding: 30px; background: rgb(243, 239, 231); border-radius: 10px; color: rgb(36, 40, 45); box-shadow: rgb(180, 0, 30) 15px 15px 0px;}
.hf-family.hf-direction-three .hf-privacy-document header{display: flex; align-items: center; gap: 10px; font-size: 10px; letter-spacing: 0.12em;}
.hf-family.hf-direction-three .hf-privacy-document header svg{width: 25px; height: 25px; color: rgb(206, 0, 22);}
.hf-family.hf-direction-three .hf-privacy-document header i{margin-left: auto; height: 8px; width: 8px; border-radius: 50%; background: rgb(223, 0, 20);}
.hf-family.hf-direction-three .hf-privacy-document h2{font-size: 36px; letter-spacing: -0.04em; margin: 28px 0px;}
.hf-family.hf-direction-three .hf-privacy-rows > div{display: flex; align-items: center; gap: 16px; padding: 20px 0px; border-top: 1px solid rgb(209, 205, 199);}
.hf-family.hf-direction-three .hf-privacy-rows > div > span{color: rgb(195, 0, 19); font-size: 12px;}
.hf-family.hf-direction-three .hf-privacy-rows p{margin: 0px;}
.hf-family.hf-direction-three .hf-privacy-rows strong{display: block; font-size: 17px;}
.hf-family.hf-direction-three .hf-privacy-rows small{display: block; font-size: 12px; margin-top: 6px; color: rgb(92, 100, 108);}
.hf-family.hf-direction-three .hf-privacy-rows i{margin-left: auto; height: 6px; width: 27px; border-radius: 3px; background: rgb(201, 0, 21);}
.hf-family.hf-direction-three .hf-privacy-document footer{padding-top: 21px; border-top: 1px solid rgb(209, 205, 199); font-size: 12px; display: flex; justify-content: space-between; gap: 12px; align-items: center;}
.hf-family.hf-direction-three .hf-privacy-document footer svg{width: 21px; height: 21px; color: rgb(201, 0, 21);}
.hf-family.hf-direction-three .hf-index-top > b{display: flex; align-items: center; gap: 15px; line-height: 1;}
.hf-family.hf-direction-three .hf-az-direction{display: inline-flex; align-items: center; justify-content: center; color: rgb(223, 0, 20);}
.hf-family.hf-direction-three .hf-az-direction svg{width: 35px; height: 35px;}
@media (max-width: 1350px) and (min-width: 1101px){.hf-family.hf-direction-three .hf-hero-copy h1{font-size: 48px;}
.hf-family.hf-direction-three .hf-intro{font-size: 18px;}
.hf-family.hf-direction-three .hf-choice-cards button{padding: 13px 10px; gap: 8px;}
.hf-family.hf-direction-three .hf-choice-cards strong{font-size: 12px;}
.hf-family.hf-direction-three .hf-process-diagram{gap: 22px;}
.hf-family.hf-direction-three .hf-process-node{font-size: 13px; padding: 13px;}
.hf-family.hf-direction-three .hf-process-core{height: 170px;}
.hf-family.hf-direction-three .hf-scene-rail{font-size: 11px; padding: 14px;}
.hf-family.hf-direction-three .hf-journal-copy h2{font-size: 23px;}
.hf-family.hf-direction-three .hf-legal-heading h2{font-size: 29px;}
.hf-family.hf-direction-three .hf-legal-details strong{font-size: 14px;}
.hf-family.hf-direction-three .hf-demo-copy h2{font-size: 27px;}}
@media (max-width: 1100px){.hf-family.hf-direction-three .hf-hero-stage{height: auto; min-height: 0px;}
.hf-family.hf-direction-three .hf-hero-inner{height: auto; display: flex; flex-direction: column; padding-top: 80px; padding-bottom: 50px;}
.hf-family.hf-direction-three .hf-hero-copy{position: relative; top: auto; left: auto; transform: none; width: 100%; max-width: 760px; z-index: 4;}
.hf-family.hf-direction-three .hf-hero-copy h1{font-size: 54px;}
.hf-family.hf-direction-three .hf-intro{font-size: 20px;}
.hf-family.hf-direction-three .hf-visual,.hf-family.hf-direction-three.hf-hero-journal .hf-visual{position: relative; top: auto; bottom: auto; right: auto; width: 100%; height: 600px; margin: 42px auto 0px; max-width: 760px;}
.hf-family.hf-direction-three.hf-hero-home .hf-home-panorama{object-fit: cover; object-position: 76% center; height: 560px; width: 100%; top: auto; bottom: 0px;}
.hf-family.hf-direction-three.hf-hero-home .hf-hero-stage::after{background: linear-gradient(rgb(10, 14, 16) 0px, rgb(10, 14, 16) 40%, rgba(10, 14, 16, 0.933) 45%, transparent 67%); z-index: 1;}
.hf-family.hf-direction-three.hf-hero-home .hf-hero-copy{width: 100%;}
.hf-family.hf-direction-three.hf-hero-home .hf-visual{height: 440px; display: flex; align-items: flex-end; bottom: auto; top: auto;}
.hf-family.hf-direction-three.hf-hero-home .hf-art{height: auto; width: 100%;}
.hf-family.hf-direction-three.hf-hero-home .hf-hero-inner{padding-bottom: 35px;}
.hf-family.hf-direction-three.hf-hero-home .hf-trails{height: 560px; top: auto; bottom: 0px;}
.hf-family.hf-direction-three.hf-hero-home .hf-home-energy{top: auto; height: 450px; bottom: 0px;}
.hf-family.hf-direction-three.hf-hero-apps .hf-visual{height: 540px;}
.hf-family.hf-direction-three.hf-hero-web .hf-visual,.hf-family.hf-direction-three.hf-hero-work .hf-visual{height: auto;}
.hf-family.hf-direction-three.hf-hero-agency .hf-visual{height: 540px;}
.hf-family.hf-direction-three.hf-hero-journal .hf-visual{height: auto;}
.hf-family.hf-direction-three .hf-journal-photo{height: 280px;}
.hf-family.hf-direction-three.hf-hero-legal .hf-visual{height: 530px;}
.hf-family.hf-direction-three .hf-baseline{height: auto; min-height: 144px;}
.hf-family.hf-direction-three .hf-hero-copy .hf-thought{margin-top: 25px;}
.hf-family.hf-direction-three .hf-back-word{font-size: 15vw; bottom: -10px;}
.hf-family.hf-direction-three.hf-hero-content .hf-visual{height: 560px;}
.hf-family.hf-direction-three .hf-browser-shot{aspect-ratio: 1.9 / 1;}}
@media (max-width: 600px){.hf-family.hf-direction-three .hf-wrap{width: calc(100% - 40px);}
.hf-family.hf-direction-three .hf-hero-inner{padding-top: 72px; padding-bottom: 35px;}
.hf-family.hf-direction-three .hf-breadcrumb{top: 23px; font-size: 11px; gap: 8px; line-height: 1.6;}
.hf-family.hf-direction-three .hf-hero-copy h1{font-size: 38px; line-height: 1.12; margin-bottom: 23px; letter-spacing: -0.04em;}
.hf-family.hf-direction-three .hf-eyebrow{font-size: 10px; line-height: 1.6; letter-spacing: 0.12em; margin-bottom: 25px;}
.hf-family.hf-direction-three .hf-intro{font-size: 16px; line-height: 1.75;}
.hf-family.hf-direction-three .hf-actions{gap: 18px; flex-wrap: wrap;}
.hf-family.hf-direction-three .hf-primary{font-size: 13px; padding: 17px 19px; min-height: 55px;}
.hf-family.hf-direction-three .hf-secondary{font-size: 12px; min-height: 40px;}
.hf-family.hf-direction-three .hf-visual{height: 355px; margin-top: 36px;}
.hf-family.hf-direction-three .hf-scene-rail{min-height: 62px; font-size: 10px; padding: 13px; gap: 14px;}
.hf-family.hf-direction-three .hf-scene-rail > span:first-child{gap: 8px; max-width: 48%; font-size: 9px; line-height: 1.5;}
.hf-family.hf-direction-three .hf-scene-rail > span:last-child{max-width: 53%; font-size: 10px; line-height: 1.5;}
.hf-family.hf-direction-three .hf-red-dot{width: 7px; height: 7px;}
.hf-family.hf-direction-three .hf-thought small{font-size: 10px;}
.hf-family.hf-direction-three .hf-thought p{font-size: 14px;}
.hf-family.hf-direction-three.hf-hero-home .hf-home-panorama{height: 430px; object-position: 100% center; bottom: 0px;}
.hf-family.hf-direction-three.hf-hero-home .hf-hero-stage::after{background: linear-gradient(rgb(10, 14, 16) 0px, rgb(10, 14, 16) 48%, rgba(10, 14, 16, 0.9) 54%, transparent 68%);}
.hf-family.hf-direction-three.hf-hero-home .hf-visual{height: 330px; margin-top: 20px;}
.hf-family.hf-direction-three.hf-hero-home .hf-hero-copy h1{font-size: 38px;}
.hf-family.hf-direction-three.hf-hero-home .hf-home-energy{height: 350px;}
.hf-family.hf-direction-three.hf-hero-home .hf-trails{height: 420px;}
.hf-family.hf-direction-three.hf-hero-home .hf-thought{max-width: 90%;}
.hf-family.hf-direction-three .hf-baseline-inner{display: block;}
.hf-family.hf-direction-three .hf-strip-item{min-height: 91px; padding: 18px 0px;}
.hf-family.hf-direction-three .hf-strip-copy strong{font-size: 16px;}
.hf-family.hf-direction-three .hf-strip-copy > span{font-size: 12px;}
.hf-family.hf-direction-three .hf-strip-number{font-size: 45px;}
.hf-family.hf-direction-three .hf-back-word{font-size: 18vw; letter-spacing: 0.02em;}
.hf-family.hf-direction-three.hf-hero-brand .hf-brand-ticket{bottom: 7px; left: 0px; width: 205px;}
.hf-family.hf-direction-three.hf-hero-brand .hf-brand-colours{bottom: 15px; right: 0px;}
.hf-family.hf-direction-three.hf-hero-brand .hf-type-small{right: 0px;}
.hf-family.hf-direction-three.hf-hero-apps .hf-visual{height: 330px;}
.hf-family.hf-direction-three.hf-hero-apps .hf-cube{width: 110%; height: 350px; max-height: none; top: -12px;}
.hf-family.hf-direction-three .hf-feature-carousel{gap: 15px;}
.hf-family.hf-direction-three .hf-browser-shot{padding: 10px; aspect-ratio: 1.75 / 1;}
.hf-family.hf-direction-three .hf-feature-caption{padding: 16px; min-height: 88px;}
.hf-family.hf-direction-three .hf-feature-caption small{font-size: 9px;}
.hf-family.hf-direction-three .hf-feature-caption h2{font-size: 22px; margin-top: 7px;}
.hf-family.hf-direction-three .hf-choice-cards{gap: 7px;}
.hf-family.hf-direction-three .hf-choice-cards button{flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 8px; padding: 11px 9px; min-height: 90px;}
.hf-family.hf-direction-three .hf-choice-cards strong{font-size: 10px; line-height: 1.4;}
.hf-family.hf-direction-three .hf-choice-number{width: 23px; height: 23px; font-size: 9px;}
.hf-family.hf-direction-three .hf-process-diagram{gap: 19px;}
.hf-family.hf-direction-three .hf-process-inputs,.hf-family.hf-direction-three .hf-process-outputs{height: 80%;}
.hf-family.hf-direction-three .hf-process-node{min-height: 56px; padding: 9px 7px; font-size: 10px; gap: 5px; border-radius: 7px;}
.hf-family.hf-direction-three .hf-process-node svg{width: 13px; height: 13px;}
.hf-family.hf-direction-three .hf-process-core{height: 113px; border-radius: 14px; box-shadow: rgb(119, 7, 25) 0px 8px 0px, rgba(223, 0, 20, 0.17) 0px 15px 30px;}
.hf-family.hf-direction-three .hf-process-core svg{width: 26px; height: 26px;}
.hf-family.hf-direction-three .hf-process-core b{font-size: 32px; margin: 5px 0px;}
.hf-family.hf-direction-three .hf-process-core span{font-size: 5px; letter-spacing: 0px;}
.hf-family.hf-direction-three .hf-art-ai{gap: 20px;}
.hf-family.hf-direction-three.hf-hero-ai .hf-visual{height: 345px;}
.hf-family.hf-direction-three.hf-hero-learn .hf-visual{height: 385px; gap: 24px;}
.hf-family.hf-direction-three.hf-hero-learn .hf-learning-photo{height: 215px;}
.hf-family.hf-direction-three.hf-hero-learn .hf-learning-question{bottom: 0px; width: 91%; left: 0px;}
.hf-family.hf-direction-three .hf-learning-question strong{font-size: 20px;}
.hf-family.hf-direction-three .hf-learning-signal i{height: 20px; width: 20px;}
.hf-family.hf-direction-three.hf-hero-content .hf-visual{height: 410px; gap: 28px;}
.hf-family.hf-direction-three.hf-hero-content .hf-editorial-heading{font-size: 41px; top: 0px;}
.hf-family.hf-direction-three.hf-hero-content .hf-editorial-frame{inset: 63px 0px 80px;}
.hf-family.hf-direction-three.hf-hero-content .hf-thought{padding: 0px 11px;}
.hf-family.hf-direction-three.hf-hero-content .hf-thought small{font-size: 9px;}
.hf-family.hf-direction-three.hf-hero-content .hf-thought p{font-size: 17px;}
.hf-family.hf-direction-three.hf-hero-offer .hf-visual{height: auto;}
.hf-family.hf-direction-three .hf-demo-toolbar{height: 43px; padding: 0px 13px;}
.hf-family.hf-direction-three .hf-demo-toolbar strong{font-size: 9px;}
.hf-family.hf-direction-three .hf-demo-toolbar i{width: 15px; height: 2px;}
.hf-family.hf-direction-three .hf-demo-toolbar span{width: 22px; height: 22px;}
.hf-family.hf-direction-three .hf-demo-toolbar svg{width: 13px; height: 13px;}
.hf-family.hf-direction-three .hf-demo-canvas{min-height: 235px;}
.hf-family.hf-direction-three .hf-demo-hero{min-height: 155px; grid-template-columns: 1.1fr 1fr;}
.hf-family.hf-direction-three .hf-demo-copy{padding: 22px 12px;}
.hf-family.hf-direction-three .hf-demo-copy small{font-size: 5px;}
.hf-family.hf-direction-three .hf-demo-copy h2{font-size: 20px; margin: 14px 0px;}
.hf-family.hf-direction-three .hf-demo-cta{font-size: 6px; padding: 7px 8px; gap: 3px;}
.hf-family.hf-direction-three .hf-demo-cta svg{width: 10px; height: 10px;}
.hf-family.hf-direction-three .hf-demo-cards{padding: 12px; gap: 7px;}
.hf-family.hf-direction-three .hf-demo-cards > div{padding: 10px 7px;}
.hf-family.hf-direction-three .hf-demo-cards small{font-size: 5px;}
.hf-family.hf-direction-three .hf-demo-cards b{font-size: 6px; margin: 8px 0px; line-height: 1.4;}
.hf-family.hf-direction-three .hf-demo-cards i{height: 2px; margin-top: 3px;}
.hf-family.hf-direction-three .hf-demo-idea{gap: 12px;}
.hf-family.hf-direction-three .hf-demo-idea strong{font-size: 23px;}
.hf-family.hf-direction-three .hf-demo-idea small{font-size: 7px;}
.hf-family.hf-direction-three .hf-demo-idea > svg{width: 33px; height: 33px;}
.hf-family.hf-direction-three .hf-build-stages{font-size: 9px; gap: 7px; padding: 0px;}
.hf-family.hf-direction-three .hf-build-stages svg{width: 13px; height: 13px;}
.hf-family.hf-direction-three.hf-hero-agency .hf-visual{height: 355px;}
.hf-family.hf-direction-three.hf-hero-agency .hf-agency-az{width: 90px; height: 90px;}
.hf-family.hf-direction-three.hf-hero-agency .hf-hero-copy .hf-thought p{font-size: 17px;}
.hf-family.hf-direction-three .hf-journal-photo{height: auto; aspect-ratio: 16 / 9;}
.hf-family.hf-direction-three .hf-journal-copy{padding: 17px;}
.hf-family.hf-direction-three .hf-article-meta{font-size: 8px; gap: 7px;}
.hf-family.hf-direction-three .hf-article-meta time{font-size: 8px;}
.hf-family.hf-direction-three .hf-article-number{width: 24px; height: 24px; font-size: 9px;}
.hf-family.hf-direction-three .hf-journal-copy h2{font-size: 21px; line-height: 1.3; min-height: 82px; margin: 14px 0px 20px;}
.hf-family.hf-direction-three .hf-read-more{font-size: 12px;}
.hf-family.hf-direction-three.hf-hero-legal .hf-visual{height: 390px; max-width: calc(100% - 13px); margin-left: 0px;}
.hf-family.hf-direction-three .hf-legal-identity{padding: 24px; grid-template-columns: 51px 1fr; gap: 16px; box-shadow: rgb(139, 8, 26) 10px 10px 0px -1px, rgb(179, 21, 41) 10px 10px 0px;}
.hf-family.hf-direction-three .hf-identity-stamp img{width: 50px; height: 50px;}
.hf-family.hf-direction-three .hf-legal-heading small{font-size: 7px; letter-spacing: 0.05em;}
.hf-family.hf-direction-three .hf-legal-heading h2{font-size: 24px;}
.hf-family.hf-direction-three .hf-legal-heading h2 span{font-size: 14px; margin-top: 7px;}
.hf-family.hf-direction-three .hf-legal-details{margin-top: 8px;}
.hf-family.hf-direction-three .hf-legal-details > div{padding: 18px 0px; display: block;}
.hf-family.hf-direction-three .hf-legal-details small{font-size: 10px; display: block; margin-bottom: 6px;}
.hf-family.hf-direction-three .hf-legal-details strong{font-size: 14px; word-break: break-word;}
.hf-family.hf-direction-three.hf-hero-privacy .hf-visual{height: 422px;}
.hf-family.hf-direction-three .hf-privacy-document{padding: 24px; width: 93%; box-shadow: rgb(180, 0, 30) 9px 9px 0px;}
.hf-family.hf-direction-three .hf-privacy-document header{font-size: 8px;}
.hf-family.hf-direction-three .hf-privacy-document h2{font-size: 29px; margin: 21px 0px;}
.hf-family.hf-direction-three .hf-privacy-rows > div{gap: 11px; padding: 17px 0px;}
.hf-family.hf-direction-three .hf-privacy-rows strong{font-size: 14px;}
.hf-family.hf-direction-three .hf-privacy-rows small{font-size: 10px;}
.hf-family.hf-direction-three .hf-privacy-rows i{width: 18px; height: 4px;}
.hf-family.hf-direction-three .hf-privacy-document footer{font-size: 10px; padding-top: 17px;}
.hf-family.hf-direction-three .hf-index-top > b{gap: 9px;}
.hf-family.hf-direction-three .hf-az-direction svg{width: 23px; height: 23px;}
.hf-family.hf-direction-three.hf-hero-sitemap .hf-visual{height: auto; min-height: 355px;}}
@media (max-width: 360px){.hf-family.hf-direction-three .hf-wrap{width: calc(100% - 32px);}
.hf-family.hf-direction-three .hf-hero-copy h1,.hf-family.hf-direction-three.hf-hero-home .hf-hero-copy h1{font-size: 33px;}
.hf-family.hf-direction-three .hf-process-diagram{gap: 11px;}
.hf-family.hf-direction-three .hf-process-node{font-size: 9px; padding: 9px 5px;}
.hf-family.hf-direction-three .hf-demo-copy h2{font-size: 17px;}
.hf-family.hf-direction-three .hf-scene-rail > span:last-child{font-size: 9px;}
.hf-family.hf-direction-three .hf-choice-cards strong{font-size: 9px;}
.hf-family.hf-direction-three .hf-legal-heading h2{font-size: 21px;}}
/* Approved final corrections: shared callout and generous web previews. */
.hf-family.hf-direction-three .hf-browser-shot{padding:16px;aspect-ratio:auto;display:block}
@media(min-width:1101px){.hf-family.hf-direction-three.hf-hero-web .hf-visual,.hf-family.hf-direction-three.hf-hero-work .hf-visual{top:72px;max-width:620px;height:auto}}
.hf-family.hf-direction-three .hf-browser-shot img{width:100%;height:auto;aspect-ratio:8/5;max-width:none;max-height:none;object-fit:contain;display:block}
.hf-family.hf-direction-three.hf-hero-content .hf-art-content .hf-thought{background:transparent;padding:0 0 0 22px;border:0;border-left:3px solid #e00016;box-shadow:none}
.hf-family.hf-direction-three .hf-thought small{font-family:inherit;font-size:15px;font-weight:700;letter-spacing:.02em;text-transform:none;color:#f7f5f0}
.hf-family.hf-direction-three .hf-thought p{font-family:inherit;font-size:clamp(18px,1.35vw,23px);font-weight:500;line-height:1.45;color:#f7f5f0}
.hf-family .hf-feature-slide[hidden]{display:none!important}
.hf-family .hf-feature-link{color:inherit;text-decoration:none;display:block}
.hf-family .hf-feature-link:focus-visible{outline:3px solid #e00016;outline-offset:-3px}
.hf-family.hf-direction-three .hf-back-word{pointer-events:none;overflow:hidden;width:100%;height:clamp(130px,15vw,235px);opacity:.1;-webkit-text-stroke:0!important;color:transparent!important}
.hf-family .hf-back-word svg{display:block;width:100%;height:100%;overflow:visible}
.hf-family .hf-back-word text{font-family:Lexend,sans-serif;font-weight:800;fill:#fff;stroke:none}
@media(max-width:700px){.hf-family.hf-direction-three .hf-browser-shot{padding:10px}.hf-family.hf-direction-three .hf-back-word{height:20vw}.hf-family.hf-direction-three.hf-hero-content .hf-thought small{font-size:13px}.hf-family.hf-direction-three.hf-hero-content .hf-thought p{font-size:18px}}

/* Existing services content must also fit narrow screens. */
@media(max-width:700px){.theme-layers{grid-template-columns:minmax(0,1fr)}.theme-layers>div{min-width:0;overflow-wrap:anywhere}}