/* Homepage refinement v4. Original hero and shared styles remain independent. */
.home-capabilities { padding: 96px 0 100px; background: #f6f7f3; color: #151816; }
.home-capabilities > .container, .home-work > .container { padding-left: 30px; padding-right: 30px; }
.home-capabilities__head { display: grid; grid-template-columns: 1.4fr 1fr; align-items: end; gap: 72px; margin-bottom: 44px; }
.home-capabilities h2, .home-work h2 { font-size: clamp(32px, 3.65vw, 52px); line-height: 1.1; letter-spacing: -.045em; font-weight: 700; text-wrap: balance; }
.home-capabilities h2 { max-width: 740px; }
.home-capabilities h2 em { font-style: normal; position: relative; z-index: 0; white-space: nowrap; }
.home-capabilities h2 em::after { content: ''; position: absolute; left: 0; right: -4px; bottom: 1px; height: .24em; background: #a0eb1d; z-index: -1; }
.home-capabilities__head p { max-width: 450px; color: #61675f; font-size: 15px; line-height: 1.85; }
.home-capabilities__body { display: grid; grid-template-columns: .92fr 1.28fr; gap: 20px; }
.design-board { position: relative; min-height: 490px; background: #141817; border-radius: 20px; overflow: hidden; isolation: isolate; }
.design-board::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background-image: linear-gradient(#b8d8b408 1px, transparent 1px), linear-gradient(90deg,#b8d8b408 1px,transparent 1px); background-size: 40px 40px; mask-image: linear-gradient(#000,transparent 83%); }
.design-board__heading { position: absolute; top: 29px; left: 30px; z-index: 3; color: #f5f7f3; font-size: clamp(24px,2.4vw,34px); font-weight: 600; letter-spacing: -.04em; line-height: 1.1; }
.design-board__heading span { color: #a0eb1d; }
.design-board__image { position: absolute; width: 118%; max-width: none; height: auto; left: -9%; top: 82px; display: block; mix-blend-mode: screen; mask-image: linear-gradient(transparent,#000 24%,#000 78%,transparent); }
.design-board__guides { position: absolute; inset: 65px 0 30px; width: 100%; height: calc(100% - 95px); z-index: 2; pointer-events: none; }
.design-board__guides .guide-ring { transform-origin: 250px 240px; animation: design-orbit 60s linear infinite; }
.design-board__tag { position: absolute; z-index: 3; padding: 7px 11px; border-radius: 30px; border: 1px solid #a0eb1d45; background: #1c251bd9; color: #c8f59b; font-size: 10px; font-weight: 600; letter-spacing: .08em; }
.design-board__tag--1 { top: 36%; left: 6%; }
.design-board__tag--2 { top: 49%; right: 5%; }
.design-board__tag--3 { bottom: 24%; left: 6%; }
.design-board__bottom { position: absolute; left: 30px; right: 30px; bottom: 28px; z-index: 3; border-top: 1px solid #ffffff25; padding-top: 17px; display: flex; align-items: center; justify-content: space-between; color: #b7beb7; font-size: 11px; letter-spacing: .03em; }
.design-board__bottom i { width: 7px; height: 7px; border-radius: 50%; background: #a0eb1d; box-shadow: 0 0 14px #a0eb1d66; }
.capability-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.capability-card { position: relative; display: flex; flex-direction: column; padding: 25px 25px 23px; border: 1px solid #dfe3d9; border-radius: 17px; background: #fff; overflow: hidden; transition: transform .45s cubic-bezier(.22,1,.36,1), border-color .45s, box-shadow .45s; }
.capability-card::after { content: ''; position: absolute; left: 25px; bottom: 0; width: 48px; height: 3px; border-radius: 3px 3px 0 0; background: #a0eb1d; transition: width .55s cubic-bezier(.22,1,.36,1); }
.capability-card__visual { display: flex; align-items: flex-start; justify-content: space-between; height: 72px; margin-bottom: 17px; }
.capability-card__art { width: 70px; height: 70px; color: #283426; transition: transform .6s cubic-bezier(.22,1,.36,1); }
.capability-card__art .accent { stroke: #7bbe12; }
.capability-card__arrow { color: #75826e; font-size: 20px; line-height: 1; transition: color .4s, transform .4s; }
.capability-card h3 { margin-bottom: 10px; font-size: clamp(17px,1.5vw,21px); line-height: 1.25; letter-spacing: -.035em; font-weight: 700; }
.capability-card p { color: #687064; font-size: 13px; line-height: 1.75; max-width: 32ch; }
.capability-card:hover, .capability-card:focus-visible { transform: translateY(-4px); border-color: #a8c77b; box-shadow: 0 16px 36px #344b1410; outline: none; }
.capability-card:hover::after, .capability-card:focus-visible::after { width: calc(100% - 50px); }
.capability-card:hover .capability-card__art, .capability-card:focus-visible .capability-card__art { transform: rotate(-5deg) translateY(-2px); }
.capability-card:hover .capability-card__arrow { color: #111; transform: translate(2px,-2px); }

.home-work { padding: 66px 0 96px; background: #0b0d0c; color: #fff; }
.brand-lead { position: relative; display: grid; grid-template-columns: .85fr 1.1fr .85fr; align-items: center; gap: 24px; min-height: 230px; padding: 30px 46px; margin-bottom: 60px; border: 1px solid #394132; border-radius: 20px; overflow: hidden; isolation: isolate; background: radial-gradient(ellipse at 18% 110%,#7bbe1221,transparent 55%),linear-gradient(110deg,#1b2119,#101510 62%,#131519); }
.brand-lead::before { content: ''; position: absolute; left: 0; top: 0; width: 40%; height: 1px; background: linear-gradient(90deg,transparent,#bcf07c,transparent); }
.brand-lead__number { position: relative; z-index: 2; display: flex; align-items: baseline; font-weight: 700; font-size: clamp(62px,7vw,100px); line-height: 1; letter-spacing: -.08em; }
.brand-lead__number b { display: inline-block; padding: 0 10px 0 0; font-size: 1.48em; line-height: .86; background: linear-gradient(140deg,#f0ffd6 10%,#a0eb1d 58%,#428918); background-clip: text; -webkit-background-clip: text; color: transparent; }
.brand-lead__number::after { content: ''; position: absolute; width: 17px; height: 4px; bottom: -20px; left: 4px; background: #a0eb1d; box-shadow: 24px 0 #a0eb1d55,48px 0 #a0eb1d22; }
.brand-lead__copy { z-index: 2; padding-right: 10px; }
.brand-lead__copy p { font-size: clamp(19px,2.3vw,31px); font-weight: 600; line-height: 1.16; letter-spacing: -.04em; text-wrap: balance; }
.brand-lead__copy span { display: block; margin-top: 17px; color: #abb5a5; font-size: 12px; line-height: 1.5; }
.brand-lead__visual { display: block; position: absolute; inset: 0 0 0 auto; width: 33%; z-index: 0; overflow: hidden; }
.brand-lead__visual::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg,#101510,transparent 30%),linear-gradient(0deg,#10151088,transparent 40%); }
.brand-lead__visual img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 41%; }
.brand-lead__visual span { position: absolute; left: 28px; right: 20px; bottom: 16px; color: #bdc5bd; z-index: 2; font-size: 10px; }
.home-work__head { display: grid; grid-template-columns: 1.25fr 1fr; align-items: end; gap: 60px; margin-bottom: 30px; }
.home-work__head h2 { max-width: 580px; }
.home-work__head p { color: #99a199; font-size: 14px; line-height: 1.8; max-width: 450px; }
.work-mosaic { display: grid; grid-template-columns: 5fr 3fr 3fr; grid-template-rows: 270px 270px; gap: 16px; }
.work-tile { position: relative; display: block; min-width: 0; min-height: 0; border: 1px solid #ffffff12; border-radius: 17px; overflow: hidden; background: #282d2a; isolation: isolate; }
.work-tile--fitness { grid-column: 1; grid-row: 1 / 3; background: #414441; }
.work-tile--care { grid-column: 2 / 4; grid-row: 1; background: linear-gradient(120deg,#858c92,#484d52 52%,#24292e); }
.work-tile--family { grid-column: 2; grid-row: 2; background: #161410; }
.work-tile--utility { grid-column: 3; grid-row: 2; background: #d34e02; }
.work-tile__media { position: absolute; inset: 0; overflow: hidden; z-index: -1; }
.work-tile img { position: absolute; display: block; width: 100%; height: 100%; object-fit: contain; transition: transform .9s cubic-bezier(.22,1,.36,1); }
.work-tile--fitness img { top: 50%; height: auto; width: 100%; left: 0; translate: 0 -50%; object-fit: contain; mask-image: linear-gradient(transparent,#000 9%,#000 91%,transparent); }
.work-tile--care img { width: auto; max-width: 100%; height: auto; max-height: 100%; top: 50%; left: 50%; translate: -50% -50%; object-fit: contain; mask-image: radial-gradient(ellipse 85% 100% at 50% 50%,#000 65%,transparent 100%); }
.work-tile--family img, .work-tile--utility img { object-fit: cover; object-position: center; }
.work-tile::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(0deg,#080b09e8,transparent 46%); }
.work-tile--fitness::after { background: linear-gradient(0deg,#111a13eb,transparent 35%),linear-gradient(180deg,#242a2688,transparent 30%); }
.work-tile__top { position: absolute; top: 28px; left: 28px; right: 28px; font-size: 12px; font-weight: 600; color: #ffffffbd; }
.work-tile__caption { position: absolute; left: 23px; right: 23px; bottom: 24px; display: flex; align-items: end; justify-content: space-between; gap: 12px; }
.work-tile__caption h3 { font-size: clamp(15px,1.6vw,21px); font-weight: 600; line-height: 1.2; letter-spacing: -.035em; max-width: 23ch; }
.work-tile--fitness .work-tile__caption h3 { font-size: clamp(24px,2.5vw,34px); max-width: 13ch; }
.work-tile__caption p { color: #d2d8ce; margin-top: 13px; font-size: 11px; line-height: 1.5; }
.work-tile__arrow { flex-shrink: 0; border: 1px solid #ffffff55; border-radius: 50%; width: 30px; height: 30px; display: grid; place-items: center; font-size: 15px; transition: color .4s,background .4s,border-color .4s; }
.work-tile:hover img, .work-tile:focus-visible img { transform: scale(1.035); }
.work-tile:hover .work-tile__arrow, .work-tile:focus-visible .work-tile__arrow { color: #151d0d; background: #a0eb1d; border-color: #a0eb1d; }
.work-tile:focus-visible, .brand-lead__visual:focus-visible { outline: 2px solid #a0eb1d; outline-offset: -4px; }
.home-work__more { margin-top: 28px; display: flex; justify-content: flex-end; }
.home-work__more a { font-size: 13px; font-weight: 600; color: #b6d691; border-bottom: 1px solid #64734f; padding: 0 0 7px; transition: color .3s; }
.home-work__more a:hover { color: #a0eb1d; }
.home-motion-ready .home-reveal { opacity: 0; transform: translateY(25px); transition: opacity .85s ease, transform 1s cubic-bezier(.22,1,.36,1); }
.home-motion-ready .home-reveal.is-visible { opacity: 1; transform: none; }
.home-reveal:nth-child(2) { transition-delay: .08s; }
.home-reveal:nth-child(3) { transition-delay: .14s; }
.home-reveal:nth-child(4) { transition-delay: .2s; }
@keyframes design-orbit { to { transform: rotate(360deg); } }
@media (max-width: 1199px) {
    .home-capabilities { padding: 72px 0; }
    .home-capabilities__head { gap: 35px; }
    .home-capabilities__body { grid-template-columns: .85fr 1.2fr; }
    .design-board { min-height: 510px; }
    .design-board__image { top: 128px; width: 150%; left: -25%; }
    .design-board__heading { left: 24px; top: 25px; }
    .capability-card { padding: 22px 20px; }
    .brand-lead { padding: 30px; grid-template-columns: 1fr 1.2fr .85fr; }
    .work-mosaic { grid-template-rows: 240px 240px; }
}
@media (max-width: 850px) {
    .home-capabilities__head { grid-template-columns: 1fr; gap: 24px; margin-bottom: 32px; }
    .home-capabilities__head p { max-width: 680px; }
    .home-capabilities__body { grid-template-columns: 1fr; }
    .design-board { min-height: 390px; }
    .design-board__image { width: 80%; left: 30%; top: -70px; }
    .design-board__heading { top: 32px; left: 30px; }
    .design-board__tag--1 { top: 43%; left: 8%; }
    .design-board__tag--2 { top: 28%; right: 7%; }
    .design-board__tag--3 { bottom: 26%; left: 20%; }
    .design-board__guides { width: 60%; left: 37%; }
    .design-board__bottom { right: 45%; }
    .capability-card { padding: 25px; }
    .capability-card p { max-width: 45ch; }
    .home-work__head { gap: 35px; }
    .brand-lead { min-height: 210px; margin-bottom: 44px; gap: 20px; grid-template-columns: .9fr 1.25fr .8fr; }
    .brand-lead__copy p { font-size: 23px; }
    .brand-lead__number { font-size: 64px; }
    .brand-lead__visual { width: 30%; }
    .work-mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: 300px 240px 240px; }
    .work-tile--fitness { grid-column: 1; grid-row: 1 / 3; }
    .work-tile--care { grid-column: 2; grid-row: 1; }
    .work-tile--care img { object-fit: contain; }
    .work-tile--family { grid-column: 2; grid-row: 2; }
    .work-tile--utility { grid-column: 1 / 3; grid-row: 3; }
    .work-tile--utility img { object-fit: contain; }
}
@media (max-width: 600px) {
    .home-capabilities { padding: 54px 0 56px; }
    .home-capabilities .container, .home-work .container { padding-left: 20px; padding-right: 20px; }
    .home-capabilities h2, .home-work h2 { font-size: 33px; letter-spacing: -.045em; }
    .home-capabilities__head p { font-size: 13px; line-height: 1.8; }
    .design-board { min-height: 390px; border-radius: 15px; }
    .design-board__heading { font-size: 27px; left: 24px; top: 25px; }
    .design-board__image { top: 91px; width: 130%; left: -15%; }
    .design-board__guides { width: 100%; left: 0; top: 50px; }
    .design-board__tag { font-size: 8px; padding: 6px 8px; }
    .design-board__tag--1 { top: 39%; left: 5%; }
    .design-board__tag--2 { top: 49%; right: 4%; }
    .design-board__tag--3 { bottom: 23%; left: 5%; }
    .design-board__bottom { left: 24px; right: 24px; bottom: 23px; font-size: 10px; }
    .capability-grid { gap: 12px; }
    .capability-card { border-radius: 14px; padding: 20px 17px 23px; }
    .capability-card__visual { height: 63px; margin-bottom: 16px; }
    .capability-card__art { width: 58px; height: 58px; }
    .capability-card h3 { font-size: 17px; min-height: 42px; }
    .capability-card p { font-size: 12px; line-height: 1.7; }
    .capability-card::after { left: 17px; }
    .home-work { padding: 40px 0 56px; }
    .brand-lead { display: block; padding: 29px 25px; min-height: 285px; margin-bottom: 39px; border-radius: 15px; }
    .brand-lead__number { font-size: 66px; width: max-content; margin-bottom: 35px; }
    .brand-lead__number::after { bottom: -14px; }
    .brand-lead__copy { max-width: 76%; }
    .brand-lead__copy p { font-size: 23px; }
    .brand-lead__copy span { margin-top: 12px; font-size: 10px; }
    .brand-lead__visual { width: 54%; z-index: 0; opacity: .55; }
    .brand-lead__visual span { display: none; }
    .brand-lead__visual img { object-position: 38% 50%; }
    .home-work__head { grid-template-columns: 1fr; gap: 19px; margin-bottom: 23px; }
    .home-work__head h2 { max-width: 300px; }
    .home-work__head p { font-size: 13px; }
    .work-mosaic { gap: 12px; grid-template-columns: 1fr 1fr; grid-template-rows: 360px 250px 230px; }
    .work-tile { border-radius: 14px; }
    .work-tile--fitness { grid-column: 1 / 3; grid-row: 1; }
    .work-tile--fitness img { top: 48%; height: auto; width: 100%; left: 0; }
    .work-tile--care { grid-column: 1 / 3; grid-row: 2; }
    .work-tile--care img { object-fit: contain; object-position: 55% 40%; }
    .work-tile--family { grid-column: 1; grid-row: 3; }
    .work-tile--utility { grid-column: 2; grid-row: 3; }
    .work-tile--family img, .work-tile--utility img { object-fit: contain; }
    .work-tile__top { left: 20px; top: 20px; font-size: 11px; }
    .work-tile__caption { left: 18px; right: 18px; bottom: 20px; gap: 7px; }
    .work-tile__caption h3 { font-size: 15px; }
    .work-tile--fitness .work-tile__caption h3 { font-size: 28px; max-width: 16ch; }
    .work-tile--family .work-tile__caption, .work-tile--utility .work-tile__caption { align-items: start; }
    .work-tile__arrow { height: 24px; width: 24px; font-size: 12px; }
    .work-tile__caption p { margin-top: 9px; font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
    .home-motion-ready .home-reveal { opacity: 1; transform: none; transition: none; }
    .design-board__guides .guide-ring { animation: none; }
    .capability-card, .capability-card::after, .capability-card__art, .work-tile img { transition: none; }
}