/* [codex] V2 continuation and motion corrections / Lanjutan V2 dan perbaikan gerak. */
.brand img,.drawer-header img{width:126px;height:32px;object-fit:contain}
figure{margin:0}.real-screen{margin:0;overflow:hidden;border:5px solid #dae1d1;border-radius:14px;background:#fff;box-shadow:0 8px 24px #0e212319}
.real-screen img{display:block;width:100%;height:auto;object-fit:cover;object-position:top}.real-screen figcaption{padding:12px 14px;font-size:12px;font-weight:500;line-height:1.4;background:#fff;color:#20332b}.real-screen small{display:block;font-size:9px;font-weight:400;color:#68746c;margin-top:4px}
.real-workspace-stage{position:relative;height:624px;max-width:1400px;margin:54px auto 0}.hero-product{position:absolute;left:15%;top:22px;width:70%;border-width:7px;border-radius:20px}.hero-product img{height:480px}.hero-crop{position:absolute;width:252px;z-index:3;border-width:4px;border-radius:12px}.hero-crop img{height:160px}.hero-crop figcaption{font-size:11px;padding:9px 12px}.hero-crop small{font-size:8px}.hero-crop-one{left:0;top:-66px;transform:rotate(-3deg)}.hero-crop-two{right:0;top:-15px;transform:rotate(3deg)}.hero-crop-two img{object-position:center}.hero-crop-three{left:1%;top:320px;transform:rotate(-3deg);width:278px}.hero-service-note{position:absolute;right:0;top:375px;width:244px;padding:24px;background:#e8edcf;border-radius:14px;text-align:left;color:#19352f;z-index:3}.hero-service-note>span{font-size:32px}.hero-service-note h2{font:400 26px/1.1 Fraunces,serif;letter-spacing:-.035em;margin:12px 0}.hero-service-note p{font-size:12px;line-height:1.6}.hero-proof-note{font-size:10px;color:#62716a;text-align:center;padding:0 0 45px}.hero::before,.hero::after{bottom:255px}
.collage-copy mark{position:relative;background:none;isolation:isolate}.collage-copy mark::before{content:'';position:absolute;inset:3px -3px 0;background:#d6ebaf;z-index:-1;transform-origin:left}.can-animate .collage-copy mark::before{transform:scaleX(0);transition:transform 500ms var(--ease-out)}.is-seen .collage-copy mark::before{transform:scaleX(1)}
.feature-grid{align-items:center;margin-top:68px}.slide-stack{min-height:390px}.slide{visibility:hidden;opacity:1;transform:none;transition:none;pointer-events:none}.slide[data-active=true]{visibility:visible;pointer-events:auto}.slide h3{font-size:38px;margin-bottom:25px}.slide .eyebrow{margin-bottom:27px}.slide .feature-lead{font-size:24px!important;margin-bottom:16px!important}.slide p:not(.eyebrow){font-size:16px;line-height:1.6}.slide-detail{padding-left:20px}.slide .inline-link{font-size:16px;margin-top:4px}.feature-art{height:525px;overflow:visible}.feature-scene{position:absolute;inset:0;visibility:hidden;pointer-events:none}.feature-scene[data-active=true]{visibility:visible}.scene-backdrop{position:absolute;inset:100px 0 20px 30px;clip-path:polygon(20% 0,82% 3%,100% 19%,96% 79%,78% 100%,8% 96%,0 53%);background:#dcebbf}.scene-backdrop-1{background:#dceaf2}.scene-backdrop-2{background:#f0e5d3}.scene-person{position:absolute;right:-12px;bottom:0;width:345px;height:515px;object-fit:contain;object-position:bottom;max-width:none}.feature-product{position:absolute;left:0;top:188px;width:278px;z-index:2;transform:rotate(-5deg);border:3px solid #2b463a;border-radius:20px}.feature-product figcaption{font-size:11px}.feature-product small{font-size:8px}.screen-disclosure{max-width:900px;margin:30px auto 0;text-align:center;font-size:10px;line-height:1.5;color:#6b726d}
.carousel-controls{gap:8px;margin-top:22px;min-height:44px}.tabs{gap:0}.tab,.tab[aria-selected=true]{width:44px;min-width:44px;height:44px;padding:0;display:grid;place-items:center}.tab .time-track{width:6px;height:6px;background:#c9cdc3;transition:none}.tab[aria-selected=true] .time-track{width:40px;height:6px;background:#d9ddd2}.tab .time-fill{background:#193c30}.play-toggle{width:44px;height:44px;min-width:44px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:none}.player-symbol{width:28px;height:28px;display:grid;place-items:center;border:1px solid #c9cec4;border-radius:50%}.player-symbol svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.play-shape{display:none}.play-toggle[data-state=paused] .play-shape{display:block;fill:currentColor;stroke-width:0}.play-toggle[data-state=paused] .pause-shape{display:none}
.section-heading{text-align:center;max-width:940px;margin:0 auto 50px}.section-heading h2,.start h2,.closing h2{font:400 clamp(42px,5vw,68px)/1.03 Fraunces,Georgia,serif;letter-spacing:-.05em}.section-heading>p{max-width:650px;margin:23px auto 0;font-size:17px;line-height:1.6;color:#5f6a63}
.operations{position:relative;isolation:isolate;overflow:hidden;background:#14261c;color:#fff;padding:72px 64px 24px}.operations-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}.operations::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#10291eed 0%,#10291eaa 43%,#10291e33 70%),linear-gradient(0deg,#101e16fa 0%,#101e1680 40%,transparent 90%)}.operations-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:100px;max-width:1260px;margin:auto;align-items:start;min-height:495px}.operations h2{font:400 clamp(42px,4.6vw,64px)/1.05 Fraunces,serif;letter-spacing:-.04em}.operations-top>div>p{max-width:455px;font-size:17px;line-height:1.7;margin:26px 0}.operations .inline-link{color:white;border-color:white;margin-top:5px}.operations-screens{position:relative;height:430px;max-width:440px;transform:rotate(3deg);margin-top:40px}.operation-scene{position:absolute;inset:0;visibility:hidden}.operation-scene[data-active=true]{visibility:visible}.operations .real-screen{border:4px solid #e2e8d8;border-radius:18px}.operation-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;max-width:1260px;margin:35px auto 0}.operation-tabs button{background:none;color:#ddd;padding:0;text-align:left;min-height:130px;display:flex;flex-direction:column;gap:16px}.operation-tabs button[aria-selected=true]{color:white}.operation-tabs b{font-size:19px;font-weight:600}.operation-tabs button>span:last-child{font-size:13px;line-height:1.6;color:#d1d8d0;max-width:260px}.operation-track,.outcome-track{height:2px;width:100%;background:#ffffff50;overflow:hidden}.operation-track [data-fill],.outcome-track [data-fill]{display:block;width:100%;height:100%;transform-origin:left;transform:scaleX(0);background:#bdf87a}.operations-bottom{max-width:1260px;margin:25px auto 0;display:flex;align-items:center;justify-content:space-between;gap:28px}.operations-bottom p{font-size:9px;line-height:1.6;color:#c7d2c6}.operations .player-symbol{border-color:#ffffff60}
.offerings{padding:106px 0 90px;overflow:hidden}.offerings .section-heading{padding-inline:24px;margin-bottom:20px}.offerings-tools{display:flex;justify-content:flex-end;align-items:center;gap:10px;max-width:1280px;margin:0 auto 20px;padding-inline:32px}.offerings-tools .text-button{font-size:12px;margin-right:8px}.round-control{min-width:44px;height:44px;border:1px solid #d8dad2;border-radius:50%;background:transparent;font-size:20px}.offerings-viewport{overflow:hidden;margin:20px 0;scrollbar-width:thin;scroll-padding:24px}.offerings-track{display:flex;width:max-content;animation:offer-drift 85s linear infinite;animation-play-state:paused}.offerings-track.reverse{animation-direction:reverse}.offer-group{display:flex;gap:18px;padding-right:18px}.offer-card{display:block;position:relative;flex-shrink:0;width:334px;min-height:330px;text-align:left;border:1px solid #d5d7cf;border-radius:19px;padding:28px;background:transparent}.offer-card img{width:78px;height:78px;object-fit:contain;margin-bottom:26px}.offer-card h3{font:500 21px/1.25 Inter,sans-serif;letter-spacing:-.025em;margin:11px 0 16px}.offer-card p{font-size:14px;line-height:1.55;color:#6d746e}.offer-card .eyebrow{font-size:9px;letter-spacing:.09em;color:#657369}.offer-arrow{position:absolute;top:24px;right:26px;font-size:24px;color:#5a685c;transition:transform 160ms var(--ease-out)}.offerings[data-running=true] .offerings-track{animation-play-state:running}.offerings:hover .offerings-track,.offerings:focus-within .offerings-track{animation-play-state:paused}.manual-offerings .offerings-viewport{overflow-x:auto;padding:0 24px;scroll-snap-type:x proximity}.manual-offerings .offerings-track{animation:none;transform:none}.manual-offerings .offer-group[aria-hidden]{display:none}.manual-offerings .offer-card{scroll-snap-align:start}@keyframes offer-drift{to{transform:translateX(-50%)}}
.outcomes{padding:40px 64px 100px;max-width:1440px;margin:auto}.outcomes-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:stretch}.outcomes-art{position:relative;min-height:595px;border-radius:18px;overflow:hidden}.outcome-image{position:absolute;inset:0;visibility:hidden}.outcome-image[data-active=true]{visibility:visible}.outcome-image img{width:100%;height:100%;object-fit:cover}.outcome-tabs button{position:relative;display:block;width:100%;background:none;text-align:left;padding:35px 24px;border-top:1px solid #dddfd8;transition:background-color 180ms ease}.outcome-tabs button[aria-selected=true]{background:#f1f0eb}.outcome-tabs h3{font:400 34px/1.08 Fraunces,serif;letter-spacing:-.045em;margin:0 0 15px}.outcome-tabs p{font-size:16px;line-height:1.55;color:#657068}.outcome-track{position:absolute;top:-1px;left:0;background:none}.outcome-track [data-fill]{background:#648b49}.outcomes-bottom{display:flex;align-items:center;justify-content:space-between;gap:15px;margin:18px 24px}.outcomes-bottom p{font-size:10px;line-height:1.5;color:#697368}
.start{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:76px;align-items:center;max-width:1440px;padding:70px 64px 100px;margin:auto}.start-photo{position:relative;border-radius:18px;overflow:hidden;align-self:stretch}.start-photo>img{width:100%;height:100%;object-fit:cover}.start-photo small{position:absolute;bottom:16px;left:16px;background:#182f24c9;color:white;padding:7px 10px;border-radius:6px;font-size:9px}.start h2{font-size:56px}.start-copy>p{font-size:17px;line-height:1.65;color:#5e6a62;margin:25px 0}.start ol{list-style:none;margin:35px 0;padding:0}.start li{display:flex;gap:20px;padding:20px 0;border-top:1px solid #d9ded4}.start li>span{font-size:12px;color:#6c786b;padding-top:5px}.start h3{font-size:19px;font-weight:500;margin-bottom:9px}.start li p{font-size:14px;line-height:1.6;color:#657067}.start .button{margin-top:6px}
.next-actions{padding:40px 48px 110px;max-width:1440px;margin:auto}.next-actions>h2{font:400 40px/1.1 Fraunces,serif;text-align:center;letter-spacing:-.04em;margin-bottom:42px}.action-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.action-card{text-align:left;border-radius:16px;background:#e2edcb;padding:25px 24px 30px}.action-1{background:#dce9ed}.action-2{background:#eee5d5}.action-3{background:#eee2ea}.action-card img{width:140px;height:150px;object-fit:contain;margin:0 auto 30px}.action-card h3{font-size:19px;line-height:1.3;font-weight:500;display:flex;gap:12px;justify-content:space-between}.action-card p{font-size:13px;line-height:1.6;color:#5d685e;margin-top:12px}.closing{text-align:center;background:#dcedbd;padding:90px 24px 96px}.closing>p{font-size:17px;line-height:1.6;margin:26px auto;max-width:560px;color:#41573e}.closing .button{background:#1d3b30;color:white}.site-footer{padding:64px 48px;display:grid;grid-template-columns:1.2fr 1.2fr 1fr 1fr;gap:48px;max-width:1440px;margin:auto}.footer-intro img{width:126px;height:32px}.footer-intro p{font-size:13px;line-height:1.7;color:#657065;margin-top:24px;max-width:220px}.site-footer h2{font-size:10px;letter-spacing:.09em;color:#6c786a;margin:9px 0 22px;font-weight:500}.site-footer button{display:block;font-size:12px;line-height:1.5;background:none;padding:9px 0;text-align:left}.review-footer{font-size:10px}
@media(hover:hover) and (pointer:fine){.offer-card:hover{background:#f1f3eb}.offer-card:hover .offer-arrow{transform:translate(2px,-2px)}.action-card:hover img{transform:translateY(-2px)}.action-card img{transition:transform 180ms var(--ease-out)}.round-control:hover,.play-toggle:hover .player-symbol{background:#e7eddf}.operations .play-toggle:hover .player-symbol{background:#ffffff20}}
@media(max-width:1100px){.hero-crop{width:200px}.hero-crop img{height:130px}.hero-crop-three{width:220px;top:320px}.hero-service-note{width:205px;padding:20px}.hero-product img{height:450px}.real-workspace-stage{height:605px}.feature-product{width:240px}.scene-person{width:300px}.feature-grid{gap:30px}.operations{padding:55px 36px 24px}.operations-top{gap:55px;min-height:460px}.operations-screens{height:370px}.operation-tabs{gap:20px}.operation-tabs b{font-size:17px}.outcomes{padding-inline:36px}.outcomes-grid{gap:32px}.outcomes-art{min-height:555px}.outcome-tabs h3{font-size:30px}.outcome-tabs button{padding:28px 20px}.start{padding-inline:36px;gap:40px}.start h2{font-size:44px}.next-actions{padding-inline:30px}.action-card{padding:20px 18px}.action-card h3{font-size:17px}.site-footer{padding-inline:32px;gap:30px}}
@media(max-width:900px){.operation-tabs{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}.operations-top{gap:32px;min-height:400px}.operations h2{font-size:43px}.operations-top>div>p{font-size:15px}.operations-screens{height:320px}.outcomes-grid{gap:22px}.outcome-tabs h3{font-size:27px}.outcome-tabs p{font-size:14px}.outcome-tabs button{padding:24px 18px}.outcomes-art{min-height:520px}.action-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.site-footer{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px}.offer-card{width:304px;min-height:330px}}
@media(max-width:700px){.brand img,.drawer-header img{width:126px;height:32px}.real-workspace-stage{height:477px;margin-top:45px}.hero-product{left:0;top:145px;width:100%;border-width:4px;border-radius:13px}.hero-product img{height:267px}.hero-product figcaption{padding:9px 11px;font-size:10px}.hero-product small{font-size:8px}.hero-crop-one{left:auto;right:1px;top:-9px;width:150px;transform:rotate(3deg)}.hero-crop-one img{height:84px}.hero-crop figcaption{font-size:9px;padding:7px 8px}.hero-crop small{display:none}.hero-crop-two,.hero-crop-three,.hero-service-note{display:none}.hero-proof-note{font-size:9px;padding:8px 0 36px}.hero::before,.hero::after{bottom:195px}.business-collage{margin-top:0}.features{padding-inline:20px;padding-bottom:55px}.features>h2{font-size:38px}.feature-grid{margin-top:42px;gap:20px}.slide-stack{min-height:365px}.slide h3{font-size:33px}.slide .eyebrow{margin-bottom:22px}.slide .feature-lead{font-size:22px!important}.slide p:not(.eyebrow){font-size:15px}.slide-detail{padding-left:15px}.carousel-controls{margin-top:16px}.feature-art{height:455px;overflow:hidden}.scene-person{width:282px;height:422px;right:-16px;bottom:8px}.scene-backdrop{inset:72px 0 30px 10px}.feature-product{left:4px;top:187px;width:231px;border-width:2px;border-radius:17px}.feature-product figcaption{font-size:10px;padding:10px}.feature-product small{font-size:7px}.screen-disclosure{font-size:9px;margin-top:10px;max-width:350px}.operations{padding:47px 22px 23px}.operations-top{display:block;min-height:0}.operations h2{font-size:42px}.operations-top>div>p{font-size:15px;margin:24px 0}.operations-screens{max-width:340px;height:340px;margin:45px auto 30px;transform:rotate(2deg)}.operations-screens figcaption{font-size:11px}.operation-tabs{gap:27px 20px;margin-top:20px}.operation-tabs button{gap:12px;min-height:136px}.operation-tabs b{font-size:16px}.operation-tabs button>span:last-child{font-size:12px}.operations-bottom{margin-top:24px;gap:20px}.operations-bottom p{font-size:8px;max-width:265px}.section-heading h2,.start h2,.closing h2{font-size:40px}.section-heading>p{font-size:15px;margin-top:22px}.offerings{padding:64px 0 40px}.offerings .section-heading{margin-bottom:24px}.offerings-tools{padding-inline:22px;margin-bottom:12px}.offer-card{width:288px;min-height:326px;padding:25px}.offer-card h3{font-size:20px}.offer-card p{font-size:13px}.outcomes{padding:40px 20px 70px}.outcomes .section-heading{margin-bottom:34px}.outcomes-grid{display:flex;flex-direction:column;gap:25px}.outcomes-art{height:412px;min-height:0;width:100%;max-width:400px;align-self:center}.outcome-image img{object-position:center 40%}.outcome-tabs button{padding:26px 18px}.outcome-tabs h3{font-size:30px}.outcome-tabs p{font-size:15px}.outcomes-bottom{margin:18px}.start{display:flex;flex-direction:column;padding:15px 20px 65px;gap:36px;align-items:stretch}.start-photo{height:330px}.start-copy>p{font-size:15px}.start ol{margin:27px 0}.start h3{font-size:18px}.start li p{font-size:14px}.start .button{font-size:14px}.next-actions{padding:10px 20px 65px}.next-actions>h2{font-size:33px;margin-bottom:30px}.action-grid{gap:12px}.action-card{padding:16px 15px 24px}.action-card img{width:110px;height:124px;margin-bottom:22px}.action-card h3{font-size:16px;gap:5px}.action-card p{font-size:11px}.closing{padding:65px 22px}.closing p{font-size:15px;max-width:330px}.site-footer{padding:45px 22px;gap:32px 22px}.footer-intro{grid-column:1/-1}.footer-intro p{max-width:285px;margin-top:18px}.site-footer nav:last-child{grid-column:1/-1}.site-footer button{font-size:12px;min-height:44px;padding:10px 0}.site-footer h2{margin-bottom:12px}.review-footer{padding:24px 22px;flex-direction:column;gap:16px}.carousel-controls .play-toggle{min-height:44px}}
@media(max-width:360px){.feature-product{width:211px;top:189px}.scene-person{width:253px;height:380px;bottom:20px}.feature-art{height:425px}.slide-stack{min-height:409px}.slide h3{font-size:30px}.features>h2{font-size:33px}.operations-screens{height:299px}.operation-tabs{gap:20px 16px}.section-heading h2,.start h2,.closing h2{font-size:36px}.outcomes-art{height:367px}.action-grid{grid-template-columns:minmax(0,1fr)}.action-card img{width:150px;height:150px}.action-card h3{font-size:20px}.action-card p{font-size:13px}}
/* [codex] Absolute scene layers need the full flex width on phones. / Lebar gambar mobile tidak boleh kolaps. */
@media(max-width:700px){.feature-grid{align-items:stretch}.feature-art,.feature-copy{width:100%}}
@media(prefers-reduced-motion:reduce){.collage-copy mark::before{transform:none!important}.collage-photo{transform:none!important}.offerings-track{animation:none}.hero-crop,.operations-screens,.feature-product{transform:none}.scene-person{transform:none}.outcome-tabs button{transition:none}}

/* [codex] Keep the source wordmark tight. Only the original arrow geometry lengthens northeast. */
.brand{display:flex;align-items:center;gap:0;width:126px;flex-shrink:0;overflow:visible}
.brand-wordmark{display:block;flex:0 0 102px;width:102px;height:32px;overflow:hidden}
.brand-wordmark img{display:block;width:126px!important;height:32px;max-width:none}
.brand-arrow{display:block;flex:0 0 24px;width:24px;height:24px;overflow:visible;fill:#bdf87a}
.brand-arrow path{d:path('M0 0 L100 0 L100 100 L79.5 100 L79.5 35 L14.5 100 L0 85.5 L65 20.5 L0 20.5 Z');transition:d 320ms cubic-bezier(.22,1,.36,1)}
.headline-mask{display:block;overflow:hidden;padding-bottom:.13em;margin-bottom:-.13em}
.headline-mask [data-motion-line]{display:block}
.number-mask{display:inline-block;overflow:hidden;vertical-align:bottom}
[data-motion-number]{display:inline-block}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 .brand:hover .brand-arrow path{d:path('M18 -18 L118 -18 L118 82 L97.5 82 L97.5 17 L14.5 100 L0 85.5 L83 2.5 L18 2.5 Z')}
 .tab .time-track{transition:width 200ms cubic-bezier(.22,1,.36,1)}
}
@media(prefers-reduced-motion:reduce){.brand-arrow path{transition:none}}
/* [codex] Play controls may retain keyboard focus; only card focus switches to manual browsing. */
.offerings[data-running=true]:focus-within .offerings-track{animation-play-state:running}
.offerings[data-running=true]:hover .offerings-track{animation-play-state:paused}
.offer-group[aria-hidden] .offer-card{cursor:pointer}

/* [codex] Keep the existing section's type and spacing while replacing the crowded carousel with three need-based links. */
.service-questions{max-width:1120px;margin:0 auto;padding:0 32px}
.service-questions>a:not(.service-questions-all){display:grid;grid-template-columns:60px minmax(0,1fr) 24px;gap:22px;align-items:start;padding:24px 0;border-top:1px solid #cdd1c9;color:var(--navy);text-decoration:none}
.service-questions>a:not(.service-questions-all):last-of-type{border-bottom:1px solid #cdd1c9}
.service-question-number{font-size:13px;color:#52665c;padding-top:5px}
.service-questions strong{display:block;font:400 clamp(26px,3vw,40px)/1.18 Fraunces,Georgia,serif;letter-spacing:-.025em}
.service-questions small{display:block;margin-top:9px;font-size:16px;line-height:1.55;color:var(--soft)}
.service-questions>a>span:last-child{font-size:23px}
.service-questions-all{display:inline-flex;gap:14px;align-items:center;margin-top:22px;font-size:16px;text-decoration:underline;text-underline-offset:5px}
.service-questions a:focus-visible{outline:3px solid var(--lime);outline-offset:4px}
@media(max-width:700px){.service-questions{padding:0 22px}.service-questions>a:not(.service-questions-all){grid-template-columns:34px minmax(0,1fr) 20px;gap:10px;padding:20px 0}.service-questions strong{font-size:26px}.service-questions small{font-size:14px}}
/* [codex] Compact selectors and a visible continuous timer. / Indikator rapat, progres jelas. */
.carousel-controls .tabs{gap:2px;align-items:center}
.carousel-controls .tab{width:24px;min-width:24px;height:44px}
.carousel-controls .tab[aria-selected=true]{width:52px;min-width:52px}
.carousel-controls .tab .time-track{width:6px;height:6px;background:#bdc5b8;transition:none}
.carousel-controls .tab[aria-selected=true] .time-track{width:44px;background:#dce2d5}
.carousel-controls .tab .time-fill{background:#244a36;transition:none;will-change:transform}
.operation-track,.outcome-track{height:3px}
.outcome-track{top:0;background:transparent}
.outcome-track [data-fill]{background:linear-gradient(90deg,#648b49,#bdf87a);transition:none;will-change:transform}
.operation-track [data-fill]{transition:none;will-change:transform}
.outcome-image[data-active=true]{z-index:2}
.outcome-image[data-leaving=true]{visibility:visible;z-index:1}
.operations-bottom,.outcomes-bottom{display:block}
@media(prefers-reduced-motion:reduce){.carousel-controls .tab[aria-selected=true] .time-fill,.operation-tabs [aria-selected=true] [data-fill],.outcome-tabs [aria-selected=true] [data-fill]{transform:scaleX(1)!important}}
/* [codex] Original editorial family: vivid metaphors, square art and restrained transitions. / Keluarga ilustrasi baru. */
.outcomes-grid{align-items:start}
.outcomes-art{min-height:0;height:auto;aspect-ratio:1;outline:1px solid #0000001a;outline-offset:-1px}
.outcome-image{margin:0}
.outcome-image img{object-fit:contain}
.outcome-tabs h3{font-size:clamp(26px,2.65vw,36px);line-height:1.18;text-wrap:balance}
.outcome-tabs p{text-wrap:pretty;line-height:1.65}
.outcome-tabs button[aria-selected=true] h3{font-weight:500}
.outcome-track [data-fill]{background:linear-gradient(90deg,#b86fea,#f46f50,#e9ac35)}
.outcomes-bottom p,.hero-proof-note,.screen-note,.operations-bottom p,.concept-caption{font-size:12px;line-height:1.6}
.action-0{background:#fff0d1}.action-1{background:#eee3ff}.action-2{background:#d9f1ee}.action-3{background:#ffe4dc}
.action-card img{height:auto;aspect-ratio:1;object-fit:contain}
.action-card p{text-wrap:pretty}
@media(max-width:700px){.outcomes-art{min-height:0;height:auto;aspect-ratio:1}.outcome-tabs h3{font-size:26px}.outcome-tabs p{font-size:15px}.concept-caption{font-size:11px}}
/* [codex] Review 2 Oct: visible heading entrances, varied scenes, one navy closing. / Revisi review. */
.motion-heading .motion-line-mask{display:block;overflow:hidden;padding:.16em .12em;margin:-.16em -.12em}
.motion-heading .motion-line{display:block}
.motion-heading .motion-word{display:inline-block;white-space:nowrap}
.motion-heading .motion-letter{display:inline-block}
.motion-heading .feature-highlight{position:relative;isolation:isolate;background:none;border-color:transparent}
.motion-heading .feature-highlight::before{content:'';position:absolute;inset:0;background:#e1ebd0;border:1px solid #aabd95;border-radius:inherit;z-index:-1;transform-origin:left}
.motion-heading.motion-ready:not(.motion-seen) .motion-line{opacity:0;transform:translateY(100%)}
.motion-heading.motion-ready:not(.motion-seen) .motion-letter{opacity:0;transform:translateY(65%)}
.motion-heading.motion-ready:not(.motion-seen) mark::before,.motion-heading.motion-ready:not(.motion-seen) .feature-highlight::before{transform:scaleX(0)}
.motion-heading.motion-seen .motion-line{transition:opacity 600ms var(--ease-out),transform 600ms var(--ease-out);transition-delay:var(--line-delay,0ms);opacity:1;transform:none}
.motion-heading.motion-seen .motion-letter{transition:opacity 320ms var(--ease-out),transform 320ms var(--ease-out);transition-delay:var(--letter-delay,0ms);opacity:1;transform:none}
.motion-heading.motion-seen mark::before,.motion-heading.motion-seen .feature-highlight::before{transform:scaleX(1);transition:transform 700ms var(--ease-out) 140ms}
.scene-editorial{position:absolute;width:92%;height:auto;aspect-ratio:1;right:0;top:28px;border-radius:24px;object-fit:cover}
.feature-scene[data-kind=product] .scene-backdrop{inset:40px 0 25px 15px;background:#dfd3f5}
.feature-scene[data-kind=product] .feature-product{width:85%;left:3%;top:62px;transform:rotate(-4deg);border-color:#122334}
.feature-scene .feature-companion{position:absolute;right:0;bottom:8px;top:auto;width:46%;border:3px solid #122334;transform:rotate(6deg);z-index:3;border-radius:16px}
.feature-scene[data-kind=illustration] .scene-backdrop{display:none}
.feature-scene[data-kind=illustration] .feature-product{width:52%;top:auto;bottom:5px;left:0;transform:rotate(-4deg)}
.operations-photo{visibility:hidden;z-index:-3;object-position:center 45%}
.operations-photo[data-active=true]{visibility:visible;z-index:-2}
.operations-photo[data-leaving=true]{visibility:visible;z-index:-3}
.operations-copy{display:grid;grid-template-columns:minmax(0,1fr);align-content:start}
.operation-copy{grid-area:1/1;visibility:hidden;pointer-events:none}
.operation-copy[data-active=true]{visibility:visible;pointer-events:auto}
.operation-copy h2{max-width:540px;text-wrap:balance}
.operation-copy p{max-width:455px;font-size:17px;line-height:1.7;margin:26px 0}
.operations-copy>.inline-link{justify-self:start;align-self:start}
.operations::before{background:linear-gradient(90deg,#122334f2 0%,#122334c9 43%,#12233440 75%),linear-gradient(0deg,#122334f5 0%,#12233499 35%,transparent 80%)}
.offer-card img{width:100px;height:100px;margin-bottom:22px}
.next-actions{max-width:none;background:#eee8f6;padding:80px max(24px,calc((100vw - 1328px)/2))}
.next-actions>h2,.next-actions>.action-grid{max-width:1328px;margin-left:auto;margin-right:auto}
.action-card{border:1px solid #12233414}
.closing,.site-footer{background:var(--navy);color:#f7f8f2;max-width:none}
.closing{padding-top:88px;padding-bottom:72px}
.closing>p{color:#c9d4de}
.closing .button{background:var(--lime);color:var(--navy)}
.site-footer{padding-inline:max(32px,calc((100vw - 1344px)/2));border-top:1px solid #ffffff24}
.site-footer .footer-intro p{color:#dce4ec;font-size:16px}
.site-footer h2{color:#aebfcc;font-size:11px}
.site-footer nav>a,.site-footer button{color:#f7f8f2}
.site-footer .footer-intro img{filter:brightness(0) invert(1)}
.cta-arrow{display:block;width:22px;height:22px;flex:0 0 22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:square;overflow:visible}
.cta-arrow path{transition:transform 240ms var(--ease-out);transform-box:view-box}
.cta-arrow-shaft{transform-origin:5px 19px}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 :is(.button,.inline-link):hover .cta-arrow-shaft{transform:scale(1.23)}
 :is(.button,.inline-link):hover .cta-arrow-head{transform:translate(3px,-3px)}
}
@media(max-width:700px){
 .scene-editorial{top:14px;width:95%;border-radius:18px}
 .feature-scene[data-kind=product] .feature-product{top:55px;width:89%;left:1%}
 .feature-scene .feature-companion{bottom:30px;width:50%;right:2%}
 .feature-scene[data-kind=illustration] .feature-product{width:62%;bottom:25px}
 .operation-copy p{font-size:15px;margin:24px 0}
 .operations-photo{object-position:65% center}
 .operations::before{background:linear-gradient(0deg,#122334f5,#122334d9 55%,#122334c9)}
 .next-actions{padding:60px 20px}
 .closing{padding:65px 22px}
 .site-footer{padding:45px 22px}
 .cta-arrow{width:18px;height:18px;flex-basis:18px}
}
@media(prefers-reduced-motion:reduce){
 .motion-heading .motion-line,.motion-heading .motion-letter{opacity:1!important;transform:none!important;transition:none!important}
 .motion-heading mark::before,.motion-heading .feature-highlight::before{transform:none!important;transition:none!important}
 .cta-arrow path{transition:none!important;transform:none!important}
 .feature-scene .feature-companion{transform:none}
}
/* [codex] Final review: tighter timing controls and an explicit language selection. / Review terakhir. */
.carousel-controls .tabs{gap:0}
.carousel-controls .tab{width:24px;min-width:24px;height:44px}
.carousel-controls .tab[aria-selected=true]{width:44px;min-width:44px}
.carousel-controls .tab[aria-selected=true] .time-track{width:36px}
/* [claude] One language button: globe + active code (ID or EN), 44px tall, quieter than the CTA. / Satu tombol bahasa. */
.language-switcher{display:inline-flex;flex-shrink:0}
.language-switcher .language{display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 12px;border:1px solid var(--rule);border-radius:12px;background:transparent;color:var(--soft);font:500 13px/1 Inter,system-ui,sans-serif;letter-spacing:.02em;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color 150ms ease,border-color 150ms ease,scale 150ms ease}
.language-switcher .language svg{width:16px;height:16px;flex-shrink:0;fill:none;stroke:var(--navy);stroke-width:1.4;stroke-linecap:round}
.language-switcher .language .language-now{color:var(--navy);font-weight:600}
@media(hover:hover) and (pointer:fine){.language-switcher .language:hover{background:#1223340a;border-color:#1223343d}}
@media(prefers-reduced-motion:no-preference){.language-switcher .language:active{scale:.96}}
@media(prefers-reduced-motion:reduce){.language-switcher .language{transition:none}}
@media(max-width:400px){.header .utilities{gap:8px}.header{gap:10px}.language-switcher .language{padding:0 9px;gap:5px}}

/* [codex] Preserve the real product canvas; enlarge on demand. / Layar asli utuh dan dapat diperbesar. */
.screen-link{display:block;cursor:zoom-in;border-radius:inherit}
.screen-link:focus-visible{outline:3px solid #bdf87a;outline-offset:5px}
.real-screen{background:#0b1b29}
.real-screen img{object-fit:contain}
.hero-product img,.hero-crop img{height:auto}
.real-workspace-stage{height:565px}
.hero-product{top:48px}
.hero-crop-three{top:315px}
.feature-scene[data-kind=product] .feature-product{width:100%;left:0;top:108px}
.feature-scene .feature-companion{width:70%;bottom:42px}
.feature-scene[data-kind=product] .scene-backdrop{inset:76px 0 24px 15px}
.operations-screens{max-width:550px;height:300px}
@media(max-width:700px){
 .real-workspace-stage{height:320px}
 .hero-product{top:120px}
 .hero-crop-one{top:0}
 .feature-scene[data-kind=product] .feature-product{top:100px;width:98%;left:1%}
 .feature-scene .feature-companion{width:74%;bottom:65px;right:2%}
 .operations-screens{height:190px;margin:35px auto 20px}
}
/* [codex] Active product evidence remains clickable; hidden scenes are inert. / Tautan hanya pada state aktif. */
.feature-scene[data-active=true] .screen-link{pointer-events:auto}
.real-screen .screen-link:focus-visible{outline-offset:-4px}
/* [codex] Keep heading masks inside the page at tablet/mobile widths. / Cegah gulir horizontal. */
.motion-heading .motion-line-mask{margin-inline:0}
/* [claude] The EN hero headline is longer than ID; size it so 'Business moving forward.' stays on one line at desktop widths. Balanced wraps avoid single-word last lines in new headings. / Headline EN muat dua baris; judul dibagi rata. */
@media(min-width:701px){html[lang=en] #hero-title{font-size:clamp(52px,6.8vw,100px)}}
@media(max-width:700px){html[lang=en] #hero-title{font-size:46px}}
@media(max-width:360px){html[lang=en] #hero-title{font-size:40px}}
#hero-title,.onboarding-aside h2,.slide h3,#business-heading,.page-lede{text-wrap:balance}

/* [codex] The six primary services replace the old HR operations panel with an image-led expanding rail. */
.service-showcase{background:#080c0b;color:#fff;padding:80px clamp(20px,4.2vw,68px) 70px;overflow:hidden}
.service-showcase-inner{max-width:1500px;margin:auto}
.service-showcase h2{font:500 clamp(30px,3vw,42px)/1.15 var(--font-body, 'Source Sans 3', sans-serif);letter-spacing:-.025em;text-align:center;margin:0 0 44px;text-wrap:balance}
.service-showcase-viewport{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;scroll-behavior:smooth;scroll-snap-type:x proximity;overscroll-behavior-inline:contain}
.service-showcase-viewport::-webkit-scrollbar{display:none}
.service-showcase-track{display:flex;align-items:stretch;gap:16px;width:max-content;min-width:100%;padding:0 0 4px}
.service-showcase-card{position:relative;isolation:isolate;display:block;flex:0 0 276px;width:276px;height:414px;overflow:hidden;border-radius:20px;color:#fff;background:#294337;scroll-snap-align:center;transition:flex-basis 650ms cubic-bezier(.22,1,.36,1),width 650ms cubic-bezier(.22,1,.36,1);outline-offset:5px}
.service-showcase-card[data-active=true]{flex-basis:492px;width:492px}
.service-showcase-image,.service-showcase-shade{position:absolute;inset:0;display:block}
.service-showcase-image img{width:100%;height:100%;max-width:none;object-fit:cover;object-position:center;transform:scale(1.035);transition:transform 800ms cubic-bezier(.22,1,.36,1)}
.service-showcase-card[data-active=true] .service-showcase-image img{transform:scale(1)}
.service-showcase-shade{background:linear-gradient(180deg,#07100b21 0%,#07100b00 34%,#07100bd9 100%);z-index:1}
.service-showcase-tag{position:absolute;z-index:2;top:22px;left:22px;max-width:calc(100% - 44px);padding:9px 14px;border-radius:999px;background:#0c1511;color:#fff;font:600 12px/1.25 var(--font-body, 'Source Sans 3', sans-serif);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.service-showcase-content{position:absolute;z-index:2;left:26px;right:26px;bottom:25px;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:18px;align-items:end}
.service-showcase-content strong{grid-column:1;font:600 27px/1.12 var(--font-body, 'Source Sans 3', sans-serif);letter-spacing:-.025em;text-wrap:balance}
.service-showcase-content>span{grid-column:1;display:block;max-width:49ch;font:400 15px/1.5 var(--font-body, 'Source Sans 3', sans-serif);margin-top:9px;opacity:0;max-height:0;overflow:hidden;transition:opacity 260ms ease,max-height 400ms ease}
.service-showcase-card[data-active=true] .service-showcase-content>span{opacity:1;max-height:145px}
.service-showcase-content b{grid-column:2;grid-row:1/span 2;display:grid;place-items:center;align-self:end;width:42px;height:42px;border-radius:50%;background:#fff;color:#132c1c;font:500 24px/1 var(--font-body, 'Source Sans 3', sans-serif)}
.service-showcase-card[data-service=digital]{background:#aecde4}
.service-showcase-card[data-service=digital] .service-showcase-image{padding:64px 0 0 38px}
.service-showcase-card[data-service=digital] .service-showcase-image img{width:116%;height:90%;object-fit:cover;object-position:left top;border:5px solid #e7eef3;border-radius:18px;box-shadow:0 14px 36px #071d3159;transform:rotate(-8deg)}
.service-showcase-card[data-service=digital][data-active=true] .service-showcase-image img{transform:rotate(-5deg)}
.service-showcase-all{display:table;width:max-content;margin:28px 0 0 auto;border-bottom:1px solid #a7c4b3;padding:5px 0 9px;font:600 15px/1.3 var(--font-body, 'Source Sans 3', sans-serif)}
.service-showcase-all span{margin-left:16px}
.service-showcase-all:hover,.service-showcase-all:focus-visible{color:#d9f4af}

/* [codex] Restore the historical two-row offer rail at a compact, readable scale. */
.offerings{padding:82px 0 68px}
.offerings .section-heading{margin-bottom:34px}
.offerings .section-heading h2{font-size:clamp(40px,4.8vw,62px)}
.offerings-viewport{margin:12px 0}
.offer-group{gap:14px;padding-right:14px}
.offerings .offer-card{width:278px;min-height:302px;padding:23px;border-radius:16px;background:#fdfdfb}
.offerings .offer-card img{width:70px;height:70px;margin-bottom:20px}
.offerings .offer-card h3{font-size:20px;margin:10px 0 12px}
.offerings .offer-card p{font-size:13px;line-height:1.5}
.offerings .offer-card .eyebrow{font-size:11px;letter-spacing:.06em}

@media(max-width:900px){
 .service-showcase{padding:64px 20px 58px}
 .service-showcase h2{margin-bottom:32px}
 .service-showcase-card{flex-basis:240px;width:240px;height:380px}
 .service-showcase-card[data-active=true]{flex-basis:390px;width:390px}
}
@media(max-width:700px){
 .service-showcase{padding:55px 0 50px}
 .service-showcase h2{font-size:32px;padding:0 22px;margin-bottom:26px}
 .service-showcase-viewport{scroll-snap-type:x mandatory;scroll-padding-inline:20px}
 .service-showcase-track{gap:12px;padding-inline:20px}
 .service-showcase-card,.service-showcase-card[data-active=true]{flex-basis:min(82vw,330px);width:min(82vw,330px);height:410px}
 .service-showcase-content>span{opacity:1;max-height:145px}
 .service-showcase-content strong{font-size:24px}
 .service-showcase-all{margin-right:22px}
 .offerings{padding:62px 0 48px}
 .offerings .section-heading h2{font-size:34px;line-height:1.08}
 .offerings .offer-card{width:250px;min-height:300px;padding:21px}
 .offerings .offer-card p{font-size:13px}
}
@media(prefers-reduced-motion:reduce){.service-showcase-viewport{scroll-behavior:auto}.service-showcase-card,.service-showcase-image img,.service-showcase-content>span{transition:none}}

/* [codex] October refinement: six editorial photos frame the copy without crossing its reading path. */
.business-collage{min-height:660px;margin-bottom:65px}
.collage-copy{top:215px}
.collage-one{left:13%;top:24px;width:202px;height:146px}
.collage-two{right:12%;top:5px;width:138px;height:188px}
.collage-three{left:6%;top:433px;width:192px;height:165px}
.collage-four{right:20%;top:459px;width:250px;height:172px}
.collage-five{left:0;top:255px;width:125px;height:148px}
.collage-six{right:0;top:273px;width:143px;height:139px}
.collage-five{transition-delay:280ms!important}
.collage-six{transition-delay:350ms!important}

/* [codex] The flagship HR Support story keeps the narrative and product evidence close together. */
.features{padding:58px clamp(24px,5vw,72px) 72px}
.feature-kicker{font-size:12px;letter-spacing:.06em;margin-bottom:22px;color:#284437}
.features>h2{max-width:840px;text-align:center;font-size:clamp(42px,4.3vw,64px)}
.feature-intro{max-width:720px;margin:22px auto 0;text-align:center;color:#45544b;font-size:18px;line-height:1.5;text-wrap:pretty}
.feature-grid{max-width:1320px;margin:48px auto 0;gap:clamp(28px,4vw,60px)}
.slide-stack{min-height:365px}
.feature-art{height:470px;overflow:hidden}
.feature-scene[data-kind=product] .feature-product{top:75px}
.feature-scene .feature-companion{bottom:30px}
.scene-editorial{width:86%;top:12px;right:4%}

/* [codex] Four broad service choices fit as one composed row; descriptions stay readable. */
.service-showcase{padding-block:68px 60px}
.service-showcase h2{margin-bottom:33px}
.service-showcase-track{justify-content:center}
.service-showcase-card{flex-basis:clamp(210px,18vw,256px);width:clamp(210px,18vw,256px);height:406px}
.service-showcase-card[data-active=true]{flex-basis:clamp(340px,31vw,448px);width:clamp(340px,31vw,448px)}
.service-showcase-tag{white-space:normal;text-overflow:clip}
.service-showcase-image img{transition:transform 700ms cubic-bezier(.22,1,.36,1),filter 450ms ease}
@media(hover:hover) and (pointer:fine){.service-showcase-card:hover .service-showcase-image img{filter:grayscale(1)}}
.service-showcase-card:focus-visible .service-showcase-image img{filter:grayscale(1)}

/* [codex] Reduce empty vertical space in the detailed offerings and monthly results. */
.offerings{padding-block:64px 54px}
.offerings .section-heading{margin-bottom:24px}
.offerings .section-heading h2{font-size:clamp(40px,4.4vw,58px)}
.offerings-viewport{margin:8px 0}
.offerings .offer-card{min-height:252px;padding:20px 22px}
.offerings .offer-card img{width:68px;height:68px;margin-bottom:10px}
.offerings .offer-card h3{margin:8px 0 8px}
.offerings .offer-card p{font-size:14px;line-height:1.45}
.outcomes{padding:54px clamp(24px,4vw,58px) 70px}
.outcomes .section-heading{margin-bottom:36px}
.outcomes-grid{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:36px;align-items:center}
.outcomes-art{width:100%;max-width:520px;justify-self:center;aspect-ratio:1}
.outcome-tabs button{padding:23px 20px}
.outcome-tabs h3{font-size:31px;margin-bottom:10px}
.outcome-tabs p{font-size:16px;line-height:1.5}

/* [codex] A quiet navy decision area leads into a white, high-contrast site footer. */
.next-actions{background:#122334;color:#fff;padding-block:65px 70px}
.next-actions>h2{margin-bottom:32px}
.action-card,.action-1,.action-2,.action-3{background:#f8f7f2;color:#122334;border-color:#f8f7f2}
.action-card p{font-size:14px;color:#46534c}
.closing{background:#122334;padding-block:64px 72px}
.site-footer{background:#fff;color:#122334;border-top:1px solid #dce2dd}
.site-footer .footer-intro p{color:#46534c}
.site-footer h2{color:#526052;font-size:12px}
.site-footer nav>a,.site-footer button{color:#122334}
.site-footer .footer-intro img{filter:none}

@media(max-width:1100px){
 .business-collage{min-height:620px}
 .collage-one{left:14%;width:165px;height:125px}
 .collage-two{right:12%;width:112px;height:158px}
 .collage-three{top:410px;width:160px;height:155px}
 .collage-four{top:425px;right:16%;width:205px;height:155px}
 .collage-five{top:255px;width:110px;height:132px}
 .collage-six{top:270px;width:117px;height:128px}
 .service-showcase-track{justify-content:flex-start}
}
@media(max-width:700px){
 .business-collage{min-height:575px;margin-bottom:42px}
 .collage-copy{top:170px}
 .collage-one{left:7%;top:24px;width:125px;height:94px}
 .collage-two{right:8%;top:7px;width:88px;height:116px}
 .collage-three{left:2%;top:432px;width:99px;height:100px}
 .collage-four{right:2%;top:434px;width:110px;height:97px}
 .collage-five{left:29%;top:448px;width:74px;height:80px}
 .collage-six{right:29%;top:452px;width:67px;height:73px}
 .features{padding:48px 20px 55px}
 .feature-kicker{font-size:11px}
 .features>h2{font-size:clamp(34px,8.3vw,42px)}
 .feature-intro{font-size:16px;line-height:1.5;margin-top:18px}
 .feature-grid{margin-top:34px;gap:14px}
 .slide-stack{min-height:340px}
 .feature-art{height:390px}
 .scene-editorial{width:92%;top:5px}
 .service-showcase{padding:54px 0 50px}
 .service-showcase-card,.service-showcase-card[data-active=true]{flex-basis:min(82vw,330px);width:min(82vw,330px);height:400px}
 .offerings{padding-block:53px 40px}
 .offerings .offer-card{width:256px;min-height:254px;padding:20px}
 .offerings .offer-card p{font-size:14px}
 .outcomes{padding:48px 20px 58px}
 .outcomes-grid{display:flex;gap:23px}
 .outcomes-art{max-width:390px}
 .outcome-tabs button{padding:21px 18px}
 .outcome-tabs h3{font-size:27px}
 .next-actions{padding:55px 20px 60px}
 .action-card p{font-size:14px}
 .closing{padding:58px 22px 65px}
 .site-footer{padding:46px 22px}
}
@media(max-width:360px){
 .collage-three{width:88px}.collage-four{width:95px}.collage-five{left:29%;width:64px}.collage-six{right:29%;width:60px}
 .feature-art{height:370px}
}
@media(prefers-reduced-motion:reduce){.service-showcase-image img{transition:none}}

/* [codex] On narrow screens, four lower collage frames form a staggered photo strip rather than overlapping. */
@media(max-width:700px){
 .business-collage{min-height:550px;margin-bottom:25px}
 .collage-three,.collage-four,.collage-five,.collage-six{width:22vw;height:88px;max-width:100px;display:block;object-fit:cover}
 .collage-three{left:2%;top:423px}
 .collage-five{left:26%;top:438px}
 .collage-six{right:26%;top:429px}
 .collage-four{right:2%;top:443px}
 .features{padding-top:35px}
}

/* [codex] Neutral device elevation avoids a colored halo against the dark service stage. */
.service-showcase-card[data-service=digital] .service-showcase-image img{box-shadow:0 14px 36px #00000055}

/* [codex] Captions and review links stay legible at normal and mobile density. */
.screen-disclosure,.review-footer,.outcomes-bottom p{font-size:12px}
.feature-product figcaption,.hero-product figcaption,.hero-crop figcaption{font-size:12px}
@media(max-width:700px){.screen-disclosure,.review-footer,.feature-product figcaption,.hero-product figcaption,.hero-crop figcaption{font-size:12px}}

/* [codex] Hostinger-inspired interaction: the photograph gives way to a solid-color artwork panel. */
.service-showcase-card{--hover-color:#cce8ab}
.service-showcase-card[data-service=recruitment]{--hover-color:#edb99d}
.service-showcase-card[data-service=consulting]{--hover-color:#ded5af}
.service-showcase-card[data-service=digital]{--hover-color:#9ec9d5}
.service-showcase-hover{position:absolute;inset:0;z-index:1;display:grid;place-items:center;background:var(--hover-color);opacity:0;transition:opacity 420ms cubic-bezier(.22,1,.36,1)}
.service-showcase-hover img{width:100%;height:100%;object-fit:contain;padding:20px 15px 78px;filter:drop-shadow(0 14px 22px #102a2633);transform:scale(.92) translateY(8px);transition:transform 600ms cubic-bezier(.22,1,.36,1)}
.service-showcase-shade{z-index:2}
.service-showcase-content{z-index:3;display:block;right:24px}
.service-showcase-content strong{display:block;max-width:18ch}
.service-showcase-arrow{position:absolute;z-index:4;top:19px;right:22px;color:#fff;font:400 28px/1 var(--font-body,'Source Sans 3',sans-serif);opacity:0;transform:translate(-5px,5px);transition:opacity 240ms ease,transform 400ms cubic-bezier(.22,1,.36,1)}
.service-showcase-card[data-service=digital] .service-showcase-hover{padding:0}
.service-showcase-card[data-service=digital] .service-showcase-hover img{width:100%;height:100%;border:0;border-radius:0;box-shadow:none;object-fit:contain;transform:scale(.92) translateY(8px)}
@media(hover:hover) and (pointer:fine){
 .service-showcase-card:hover .service-showcase-image img{filter:none}
 .service-showcase-card:hover .service-showcase-hover{opacity:1}
 .service-showcase-card:hover .service-showcase-hover img,.service-showcase-card[data-service=digital]:hover .service-showcase-hover img{transform:scale(1) translateY(0)}
 .service-showcase-card:hover .service-showcase-arrow{opacity:1;transform:translate(0,0)}
}
.service-showcase-card:focus-visible .service-showcase-image img{filter:none}
.service-showcase-card:focus-visible .service-showcase-hover{opacity:1}
.service-showcase-card:focus-visible .service-showcase-hover img,.service-showcase-card[data-service=digital]:focus-visible .service-showcase-hover img{transform:scale(1) translateY(0)}
.service-showcase-card:focus-visible .service-showcase-arrow{opacity:1;transform:translate(0,0)}

/* [codex] The next step is a compact decision area; the closing invitation is a white editorial panel. */
.next-actions{background:#0b373a;padding:68px max(24px,calc((100vw - 1328px)/2)) 78px;color:#fff}
.next-actions-top{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr);gap:68px;align-items:start;max-width:1328px;margin:auto}
.next-actions-kicker{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:#b9d9c7;margin:0 0 22px}
.next-actions-top h2{font:400 clamp(48px,5.8vw,78px)/1.02 Fraunces,Georgia,serif;letter-spacing:-.05em;max-width:740px;margin:0;text-wrap:balance}
.next-actions-guide{padding-top:11px}
.next-actions-guide ul{margin:0 0 31px;padding-left:21px;list-style:disc}
.next-actions-guide li{font-size:17px;line-height:1.6;padding-left:5px;margin:0 0 12px;color:#f6faf7}
.next-actions-guide .button{background:#fff;color:#123a3b;border-radius:10px;min-height:48px}
.next-actions .action-grid{max-width:1328px;margin:54px auto 0;gap:22px}
.next-actions .action-card{display:block;min-width:0;padding:0;background:none;color:#fff;border:0;border-radius:0;text-align:left}
.action-card-visual{position:relative;display:grid;place-items:center;height:204px;background:#f4c7c1;border-radius:13px;overflow:hidden}
.action-1 .action-card-visual{background:#e8d2ed}
.action-2 .action-card-visual{background:#bbebe1}
.action-3 .action-card-visual{background:#c8d9ef}
.next-actions .action-card img{display:block;width:145px;height:145px;aspect-ratio:1;object-fit:contain;margin:0;transition:transform 300ms cubic-bezier(.22,1,.36,1)}
.action-card-arrow{position:absolute;right:10px;bottom:10px;display:grid;place-items:center;width:34px;height:34px;border:1px solid #bcc9d0;border-radius:8px;background:#fff;color:#153a3c;font-size:22px;line-height:1}
.action-card-copy{display:block;padding-top:18px}
.action-card-copy strong{display:block;font-size:21px;line-height:1.18;font-weight:600;letter-spacing:-.02em}
.action-card-copy>span{display:block;margin-top:10px;color:#d5e2df;font-size:15px;line-height:1.45;text-wrap:pretty}
.next-actions .action-card:hover img,.next-actions .action-card:focus-visible img{transform:translateY(-4px)}
.closing{position:relative;margin-top:-24px;border-radius:25px 25px 0 0;background:#fff;color:#122334;padding:97px 24px 103px}
.closing h2{font-size:clamp(45px,6vw,78px);max-width:980px;margin:auto;text-wrap:balance}
.closing>p{font-size:18px;line-height:1.5;max-width:670px;color:#46534c}
.closing .button{background:#0b5b62;color:#fff;border-radius:12px}
.site-footer{border-top:1px solid #e3e6df}

/* [codex] Compact catalogue titles and a clear, Gusto-inspired hover boundary. */
.offerings .offer-card{transition:border-color 180ms ease,box-shadow 180ms ease,transform 180ms ease}
.offerings .offer-card h3{font-size:18px;line-height:1.23;min-height:2.46em;max-width:100%;text-wrap:balance;overflow-wrap:normal}
.offerings .offer-card p{margin-top:0}
@media(hover:hover) and (pointer:fine){.offerings .offer-card:hover{border-color:#e57359;box-shadow:0 0 0 2px #e5735924;transform:translateY(-2px)}}
.offerings .offer-card:focus-visible{border-color:#e57359;box-shadow:0 0 0 3px #e5735940;outline:2px solid #122334;outline-offset:2px}
@media(prefers-reduced-motion:reduce){.offerings .offer-card{transition:none}.offerings .offer-card:hover{transform:none}}
@media(max-width:900px){
 .next-actions-top{gap:40px;grid-template-columns:minmax(0,1fr) minmax(250px,.8fr)}
 .next-actions .action-grid{gap:16px}
 .action-card-visual{height:166px}
 .action-card-copy strong{font-size:18px}
}
@media(max-width:700px){
 .service-showcase-hover{display:none}
 .service-showcase-arrow{opacity:1;transform:none;top:18px;right:19px}
 .service-showcase-content{right:23px}
 .next-actions{padding:58px 20px 67px}
 .next-actions-top{display:block}
 .next-actions-top h2{font-size:clamp(40px,10vw,56px)}
 .next-actions-guide{padding-top:28px}
 .next-actions-guide li{font-size:16px;margin-bottom:8px}
 .next-actions .action-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 14px;margin-top:43px}
 .action-card-visual{height:150px}
 .next-actions .action-card img{width:112px;height:112px}
 .action-card-copy{padding-top:12px}
 .action-card-copy strong{font-size:17px}
 .action-card-copy>span{font-size:14px;margin-top:7px}
 .closing{padding:74px 21px 80px}
 .closing h2{font-size:clamp(42px,10vw,56px)}
 .closing>p{font-size:16px}
}
@media(max-width:360px){.next-actions .action-grid{grid-template-columns:1fr;gap:26px}.action-card-visual{height:185px}.next-actions .action-card img{width:135px;height:135px}}
@media(prefers-reduced-motion:reduce){.service-showcase-hover,.service-showcase-hover img,.service-showcase-arrow,.next-actions .action-card img{transition:none}}

/* [codex] An even teal field and one primary product capture give the hero a clear reading order. */
.hero{padding-top:48px}
.hero::before{bottom:122px;border-radius:0 0 22px 22px;background:#075a5b}
.hero::after{display:none}
.hero-copy{gap:18px}
.hero h1{font-size:clamp(60px,6.6vw,92px);line-height:1.02;max-width:870px}
.hero .lede{max-width:640px;font-size:18px}
.hero-actions{padding-top:4px}
.real-workspace-stage{height:510px;margin-top:48px;max-width:1310px}
.hero-product{left:15%;top:32px;width:70%;border:6px solid #e7eee7;border-radius:19px;box-shadow:0 24px 50px #042c2b4d}
.hero-crop{width:235px;border:4px solid #e7eee7;box-shadow:0 16px 35px #042c2b36}
.hero-crop-one{left:1%;top:9px;transform:rotate(-3deg)}
.hero-crop-two{right:1%;top:70px;transform:rotate(3deg)}
.hero-proof-note{padding:14px 0 38px}
@media(max-width:900px){
 .hero{padding-top:38px}
 .hero::before{bottom:90px}
 .real-workspace-stage{height:455px;max-width:750px}
 .hero-product{left:9%;width:82%}
 .hero-crop{width:180px}
 .hero-crop-two{top:185px}
}
@media(max-width:700px){
 .hero{padding:35px 16px 0}
 .hero::before{bottom:75px;border-radius:0 0 15px 15px}
 .hero h1{font-size:clamp(48px,12vw,62px);line-height:1.02}
 .hero .lede{font-size:15px;max-width:350px}
 .hero-actions{gap:9px}
 .real-workspace-stage{height:350px;margin-top:43px}
 .hero-product{left:0;top:80px;width:104%;border-width:4px;border-radius:13px}
 .hero-product img{height:auto}
 .hero-crop-one{left:auto;right:0;top:0;width:148px;transform:rotate(3deg)}
 .hero-crop-two{display:none}
 .hero-proof-note{padding:11px 0 31px}
}

/* [codex] Genuine screen showcase, approved client words, compact FAQ, and Gusto-inspired closing rhythm. */
.demo-showcase,.client-proof,.home-faq{max-width:1440px;margin-inline:auto;padding:90px 48px}
.demo-showcase-heading,.client-proof-heading{display:flex;align-items:end;justify-content:space-between;gap:40px;margin-bottom:35px}
.demo-showcase-heading>div,.client-proof-heading>h2{max-width:680px}
.demo-showcase-heading h2,.client-proof-heading h2,.home-faq h2{font:400 clamp(40px,4.4vw,64px)/1.06 Fraunces,Georgia,serif;letter-spacing:-.045em;text-wrap:balance}
.demo-showcase-heading>p,.client-proof-heading>p,.home-faq-heading>p{max-width:370px;color:#52605c;font-size:17px;line-height:1.55}
.demo-showcase-heading .eyebrow{margin:0 0 13px;color:#0b5b62;font-size:12px;letter-spacing:.1em}
.demo-showcase-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:18px}
.demo-showcase-card{display:flex;flex-direction:column;min-width:0;overflow:hidden;border:1px solid #d7dcd7;border-radius:22px;color:#122334;text-decoration:none;background:#fff;transition:border-color .25s,box-shadow .25s,transform .25s}
.demo-showcase-card:hover,.demo-showcase-card:focus-visible{border-color:#ca6c7d;box-shadow:0 16px 40px #12233412;transform:translateY(-3px)}
.demo-showcase-card-0{grid-row:span 2}
.demo-showcase-visual{display:grid;place-items:center;min-height:210px;overflow:hidden;background:#e7edf3;padding:18px}
.demo-showcase-card-0 .demo-showcase-visual{min-height:430px;background:#e2efe8;padding:30px}
.demo-showcase-card-1 .demo-showcase-visual{background:#ece6f3}
.demo-showcase-card-2 .demo-showcase-visual{background:#e4edee}
.demo-showcase-visual>img,.demo-frame img{display:block;width:100%;height:100%;max-height:220px;object-fit:contain;box-shadow:0 14px 28px #12233419;border-radius:10px}
.demo-showcase-card-2 .demo-showcase-visual>img{max-height:180px;width:auto}
.demo-frame{display:grid;place-items:center;position:relative;width:100%;height:385px}
.demo-frame-screen{position:absolute;inset:0;display:grid;place-items:center;opacity:0;animation:upright-demo-frames 15s linear infinite}
.demo-frame-screen:nth-child(1){animation-delay:0s}.demo-frame-screen:nth-child(2){animation-delay:-10s}.demo-frame-screen:nth-child(3){animation-delay:-5s}
.demo-frame img{width:100%;max-height:360px;object-fit:contain}
@keyframes upright-demo-frames{0%,29%{opacity:1}33%,96%{opacity:0}100%{opacity:1}}
.demo-showcase-copy{position:relative;display:grid;gap:9px;padding:22px 58px 24px 24px}
.demo-showcase-copy strong{font-size:22px;line-height:1.2}.demo-showcase-copy>span{color:#52605c;font-size:15px;line-height:1.5}
.demo-showcase-copy b{position:absolute;right:24px;top:22px;font-size:22px;font-weight:400}.demo-showcase-link{display:inline-flex;margin-top:25px}
.client-proof{padding-top:52px}.client-proof-grid{display:grid;grid-template-columns:1.08fr .92fr 1fr;gap:16px}
.proof-card{display:flex;flex-direction:column;justify-content:space-between;gap:34px;min-width:0;min-height:310px;margin:0;padding:30px;border-radius:20px;background:#f3f3f1}
.proof-card-1{background:#ecf0e5}.proof-card-2{background:#eaeaf4}.proof-card blockquote{margin:0}
.proof-card blockquote p{font-size:clamp(16px,1.45vw,20px);line-height:1.47;letter-spacing:-.015em}
.proof-card figcaption{display:grid;gap:3px;border-top:1px solid #12233433;padding-top:17px;font-size:14px}.proof-card figcaption span{color:#52605c}
.home-faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:70px;padding-top:100px;padding-bottom:96px}
.home-faq-heading>p{margin:20px 0 24px}.home-faq .faq-list{min-width:0}
.home-faq .faq-list details{border-bottom:1px solid #d6ddd9}.home-faq .faq-list details:first-child{border-top:1px solid #d6ddd9}
.home-faq .faq-list summary{font-size:19px;font-weight:600;padding:23px 5px;list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px}
.home-faq .faq-list summary::-webkit-details-marker{display:none}.home-faq .faq-list details[open] summary span{transform:rotate(45deg)}
.home-faq .faq-list summary span{font-size:27px;line-height:1;transition:transform .2s}
.home-faq .faq-list p{max-width:650px;margin:0;padding:0 35px 24px 5px;color:#52605c;font-size:16px;line-height:1.6}
.closing{padding:105px 24px 112px}.closing h2{max-width:1040px}
.closing h2 strong{display:block;font:700 clamp(41px,6.3vw,82px)/1 'Source Sans 3',Arial,sans-serif;letter-spacing:-.06em;color:#f25065;text-transform:uppercase}
.closing h2 span{display:block;color:#122334;font-size:clamp(45px,6.2vw,80px)}.closing>p{max-width:650px;margin-block:26px 30px}
.closing-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:12px}
.closing-actions .button{min-width:165px;display:inline-flex;align-items:center;justify-content:center;gap:15px;min-height:50px;border:2px solid transparent;background:linear-gradient(#0b5b62,#0b5b62) padding-box,linear-gradient(115deg,#ed6780,#8d76c6,#69a07a) border-box;box-shadow:0 2px 0 #eb775a}
.closing-actions .button.closing-outline{color:#122334;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(115deg,#ed6780,#8d76c6,#69a07a) border-box}
.closing-actions .button:hover,.closing-actions .button:focus-visible{box-shadow:0 5px 0 #ed6780;transform:translateY(-2px)}
@media(max-width:900px){.demo-showcase,.client-proof,.home-faq{padding-inline:28px}.home-faq{gap:38px}.client-proof-grid{grid-template-columns:1fr 1fr}.proof-card:last-child{grid-column:1/-1;min-height:0}}
@media(max-width:700px){.demo-showcase,.client-proof,.home-faq{padding:64px 20px}.demo-showcase-heading,.client-proof-heading{display:block}.demo-showcase-heading>p,.client-proof-heading>p{margin-top:18px}.demo-showcase-grid,.client-proof-grid,.home-faq{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}.demo-showcase-card-0{grid-row:auto}.demo-showcase-card-0 .demo-showcase-visual{min-height:275px;padding:16px}.demo-frame{height:260px}.demo-frame img{max-height:238px}.demo-showcase-visual{min-height:180px}.demo-showcase-copy{padding:18px 52px 20px 19px}.demo-showcase-copy strong{font-size:19px}.demo-showcase-copy>span{font-size:14px}.proof-card,.proof-card:last-child{grid-column:auto;min-height:0;padding:24px;gap:28px}.proof-card blockquote p{font-size:17px}.home-faq{gap:26px}.home-faq .faq-list summary{font-size:17px}.closing{padding:75px 20px 85px}.closing h2 strong{font-size:clamp(39px,10vw,60px)}.closing h2 span{font-size:clamp(42px,10vw,61px)}}
@media(prefers-reduced-motion:reduce){.demo-frame-screen{animation:none;opacity:0}.demo-frame-screen:first-child{opacity:1}.demo-showcase-card,.closing-actions .button{transition:none}}
.demo-motion-toggle{display:flex;align-items:center;gap:8px;margin:-12px 0 18px auto;padding:9px 12px;border:1px solid #b9c8c0;border-radius:9px;background:#fff;color:#204740;font:600 13px/1.2 'Source Sans 3',Arial,sans-serif;cursor:pointer}
.demo-motion-toggle span{font-size:12px}.demo-motion-toggle:hover{border-color:#0b5b62}
.demo-paused .demo-frame-screen{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.demo-motion-toggle{display:none}}
.demo-showcase-card-0 .demo-showcase-visual{flex:1}
.demo-showcase-card-0 .demo-frame{height:100%;min-height:385px}
@media(max-width:700px){.demo-showcase-card-0 .demo-frame{height:260px;min-height:260px}}

/* [codex] Alternating paired imagery keeps the business collage alive without shifting its layout. */
.collage-photo{display:block;overflow:hidden;background:#e9ebe5}
.collage-photo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:collage-cycle 12s ease-in-out infinite;animation-delay:var(--collage-delay)}
.collage-photo>img:nth-child(2){animation-delay:calc(var(--collage-delay) - 6s)}
@keyframes collage-cycle{0%,43%{opacity:1}50%,93%{opacity:0}100%{opacity:1}}

/* [codex] Rail cards have breathing room for the gradient stroke and never move on hover. */
.offerings-viewport{padding-block:10px;margin-block:2px}
.offerings .offer-card{width:clamp(335px,30vw,405px);min-height:244px;padding:20px 25px;border:1.5px solid transparent;background:linear-gradient(#fdfdfb,#fdfdfb) padding-box,linear-gradient(115deg,#d4d9d1,#d4d9d1) border-box;transition:background .2s ease;transform:none;box-shadow:none}
.offerings .offer-card h3{min-height:0;max-width:29ch;font-size:19px}
.offerings .offer-card p{max-width:34ch}
@media(hover:hover) and (pointer:fine){.offerings .offer-card:hover{border-color:transparent;background:linear-gradient(#fdfdfb,#fdfdfb) padding-box,linear-gradient(115deg,#ee8767,#d866a6 45%,#7c72c9 75%,#75b7a2) border-box;box-shadow:none;transform:none}}
.offerings .offer-card:focus-visible{border-color:transparent;background:linear-gradient(#fdfdfb,#fdfdfb) padding-box,linear-gradient(115deg,#ee8767,#d866a6 45%,#7c72c9 75%,#75b7a2) border-box;box-shadow:none;outline:2px solid #122334;outline-offset:2px}

/* [codex] Product work is presented as one editorial split with two related paths beneath. */
.demo-showcase-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.demo-showcase-card-0{grid-column:1/-1;grid-row:auto;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(340px,.9fr);min-height:440px}
.demo-showcase-card-0 .demo-showcase-visual{min-height:440px;padding:36px;background:#e2efe8}
.demo-showcase-card-0 .demo-frame{height:100%;min-height:350px}
.demo-showcase-card-0 .demo-showcase-copy{align-content:center;gap:20px;padding:48px 64px}
.demo-showcase-card-0 .demo-showcase-copy strong{max-width:14ch;font:400 clamp(36px,4vw,58px)/1.05 Fraunces,Georgia,serif;letter-spacing:-.04em}
.demo-showcase-card-0 .demo-showcase-copy>span{max-width:34ch;font-size:17px}
.demo-showcase-card-0 .demo-showcase-copy b{position:static;margin-top:20px;border-top:1px solid #bccac5;padding-top:15px}
.demo-showcase-card-1,.demo-showcase-card-2{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);min-height:245px}
.demo-showcase-card-1 .demo-showcase-visual,.demo-showcase-card-2 .demo-showcase-visual{min-height:245px}
.demo-showcase-card-1 .demo-showcase-copy,.demo-showcase-card-2 .demo-showcase-copy{align-content:center}

/* [codex] Visual and quote tiles form a varied proof wall; each image has a truthful caption. */
.client-proof-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:start}
.proof-column{display:grid;gap:20px;min-width:0}
.proof-column-1{padding-top:38px}
.proof-column-2{padding-top:14px}
.proof-column-1 .proof-card{order:-1}
.proof-visual{position:relative;overflow:hidden;min-height:300px;margin:0;border-radius:20px;background:#e9eee9}
.proof-visual>span,.proof-visual img{display:block;width:100%;height:100%}
.proof-visual>span{position:absolute;inset:0}
.proof-visual img{object-fit:cover}
.proof-column-1 .proof-visual{min-height:245px}
.proof-column-2 .proof-visual{min-height:335px;background:#e9e9f2}
.proof-column-2 .proof-visual img{object-fit:contain;padding:26px}
.proof-visual figcaption{position:absolute;bottom:12px;left:12px;right:12px;z-index:1;width:max-content;max-width:calc(100% - 24px);border-radius:7px;background:#142923d9;color:#fff;padding:7px 10px;font-size:12px;line-height:1.3}
.proof-card{min-height:280px}
.proof-column-1 .proof-card{min-height:360px}

/* [codex] The close has one clear action and the warm, multicolor typography requested. */
.closing h2 strong{color:transparent;background:linear-gradient(100deg,#de4f7f 8%,#fa4e48 48%,#ed722e 93%);background-clip:text;-webkit-background-clip:text}
.closing-actions .button{min-width:190px;background:linear-gradient(#0b5b62,#0b5b62) padding-box,linear-gradient(115deg,#f17472,#d561b5 48%,#78afa0) border-box;color:#fff}
@media(max-width:1000px){.demo-showcase-card-0{grid-template-columns:minmax(0,1fr) minmax(300px,.85fr)}.demo-showcase-card-0 .demo-showcase-copy{padding:36px}.demo-showcase-card-1,.demo-showcase-card-2{display:flex;flex-direction:column}}
@media(max-width:700px){.offerings .offer-card{width:min(84vw,355px);min-height:240px}.demo-showcase-grid,.client-proof-grid{grid-template-columns:1fr}.demo-showcase-card-0{display:flex;flex-direction:column;min-height:0}.demo-showcase-card-0 .demo-showcase-visual{min-height:270px;padding:18px}.demo-showcase-card-0 .demo-frame{height:260px;min-height:260px}.demo-showcase-card-0 .demo-showcase-copy{padding:23px 54px 27px 23px}.demo-showcase-card-0 .demo-showcase-copy strong{font-size:38px}.demo-showcase-card-0 .demo-showcase-copy b{margin-top:4px}.proof-column,.proof-column-1,.proof-column-2{padding-top:0}.proof-column-1 .proof-card{min-height:0}.proof-visual,.proof-column-1 .proof-visual,.proof-column-2 .proof-visual{min-height:270px}.proof-card{min-height:0}}
@media(prefers-reduced-motion:reduce){.collage-photo>img{animation:none;opacity:1}.collage-photo>img:nth-child(2){display:none}}
@media(min-width:701px) and (max-width:1000px){.client-proof-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.proof-column-2{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}.proof-column-2 .proof-visual,.proof-column-2 .proof-card{min-height:290px}}
/* [codex] Shared revision: compact paired rails, independently appearing photos, and editorial proof. */
.offerings{padding-block:72px 66px}
.offerings .section-heading{margin-bottom:15px}
.offerings-viewport{padding-block:3px;margin-block:4px}
.offerings .offer-card{min-height:218px;padding:17px 24px}
.offerings .offer-card img{width:64px;height:64px;margin-bottom:15px}
.offerings .offer-card h3{margin:8px 0 9px}
.offerings .offer-card p{margin:0}
.offerings[data-running=false] .offerings-track,.offerings:hover .offerings-track{animation-play-state:paused!important}
.collage-pair{display:contents}
.collage-photo{background:#e9ebe5}
.collage-photo>img{position:static;display:block;width:100%;height:100%;object-fit:cover;animation:none}
.collage-seven{left:4%;top:28px;width:145px;height:112px}
.collage-eight{right:5%;top:42px;width:178px;height:125px}
.collage-nine{left:18%;top:438px;width:142px;height:123px}
.collage-ten{right:8%;top:422px;width:182px;height:136px}
.collage-eleven{left:1%;top:283px;width:115px;height:130px}
.collage-twelve{right:0;top:285px;width:118px;height:126px}
.business-collage.is-seen .collage-photo{animation:collage-appear 24s ease-in-out infinite;animation-delay:var(--collage-delay);transition:none}
@keyframes collage-appear{0%,18%{opacity:1}25%,99%{opacity:0}100%{opacity:1}}
.demo-showcase-grid{gap:18px}
.demo-showcase-card-0{border:0;border-radius:0;overflow:visible;min-height:490px;gap:clamp(24px,4vw,65px)}
.demo-showcase-card-0:hover,.demo-showcase-card-0:focus-visible{box-shadow:none;transform:none}
.demo-showcase-card-0 .demo-showcase-visual{min-height:490px;border-radius:24px;background:linear-gradient(135deg,#dfeeed,#e8eaf7 76%);padding:38px}
.demo-showcase-card-0 .demo-frame{min-height:385px}
.demo-showcase-card-0 .demo-frame::before,.demo-showcase-card-0 .demo-frame::after{content:'';position:absolute;width:78%;height:73%;border-radius:14px;background:#d8e0ef;box-shadow:0 14px 30px #12233416}
.demo-showcase-card-0 .demo-frame::before{top:4%;left:8%;transform:rotate(-5deg)}
.demo-showcase-card-0 .demo-frame::after{top:9%;right:5%;transform:rotate(4deg);background:#d6e9dc}
.demo-showcase-card-0 .demo-frame-screen{z-index:1;inset:17% 4% 4%;border-radius:12px;overflow:hidden}
.demo-showcase-card-0 .demo-frame img{max-height:360px;box-shadow:0 17px 40px #12233435}
.demo-showcase-card-0 .demo-showcase-copy{padding:30px 16px 30px 0;align-content:center;gap:22px}
.demo-showcase-card-0 .demo-showcase-copy::before{content:'UPRIGHT HRIS';color:#264f78;font-size:12px;font-weight:700;letter-spacing:.13em}
.demo-showcase-card-0 .demo-showcase-copy strong{font:500 clamp(32px,3.4vw,48px)/1.1 'Source Sans 3',Arial,sans-serif;letter-spacing:-.04em}
.demo-showcase-card-0 .demo-showcase-copy>span{max-width:38ch;font-size:19px}
.demo-showcase-card-0 .demo-showcase-copy b{display:block;border-color:#aab6c0;margin-top:23px;padding-top:18px;text-align:right}
.demo-showcase-card-1,.demo-showcase-card-2{border:0;border-radius:19px;background:#f1f0f9}
.demo-showcase-card-2{background:#e9f2f2}
.demo-showcase-card-1 .demo-showcase-visual,.demo-showcase-card-2 .demo-showcase-visual{background:transparent}
.demo-showcase-card-1 .demo-showcase-copy,.demo-showcase-card-2 .demo-showcase-copy{padding-right:52px}
.client-proof-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:350px 350px;gap:16px}
.proof-column{display:contents}
.proof-visual,.proof-card,.proof-column-1 .proof-card,.proof-column-1 .proof-visual,.proof-column-2 .proof-visual{min-height:0;height:100%;border-radius:19px}
.proof-column-0 .proof-visual{grid-column:1;grid-row:1;background:#e5ebee}
.proof-column-0 .proof-card{grid-column:1;grid-row:2}
.proof-column-1 .proof-card{grid-column:2;grid-row:1;background:#f3f3f3}
.proof-column-1 .proof-visual{grid-column:2;grid-row:2;background:#dcd6f6}
.proof-column-2 .proof-visual{grid-column:3;grid-row:1 / span 2;background:#33215f}
.proof-column-2 .proof-card{grid-column:4;grid-row:1 / span 2;background:#f3f3f3}
.proof-visual img{object-fit:contain;padding:20px}
.proof-column-1 .proof-visual img{object-fit:cover;padding:0}
.proof-column-2 .proof-visual img{object-fit:contain;padding:22px}
.proof-card{padding:26px;gap:16px}
.proof-card blockquote p{font-size:clamp(15px,1.22vw,18px);line-height:1.45}
@media(max-width:1000px){.client-proof-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;grid-auto-rows:minmax(300px,auto)}.proof-column-0 .proof-visual,.proof-column-0 .proof-card,.proof-column-1 .proof-card,.proof-column-1 .proof-visual,.proof-column-2 .proof-visual,.proof-column-2 .proof-card{grid-column:auto;grid-row:auto}.proof-column-2 .proof-visual,.proof-column-2 .proof-card{min-height:350px}}
@media(max-width:700px){.offerings{padding-block:54px 46px}.offerings .offer-card{min-height:212px}.collage-extra{display:none}.business-collage.is-seen .collage-photo{animation:none;opacity:1}.demo-showcase-card-0{gap:0}.demo-showcase-card-0 .demo-showcase-visual{min-height:290px;padding:12px}.demo-showcase-card-0 .demo-showcase-copy{padding:26px 20px}.demo-showcase-card-0 .demo-showcase-copy strong{font-size:36px}.demo-showcase-card-0 .demo-showcase-copy>span{font-size:16px}.client-proof-grid{grid-template-columns:1fr;grid-auto-rows:auto}.proof-column-0 .proof-visual,.proof-column-1 .proof-visual,.proof-column-2 .proof-visual{height:300px}.proof-card,.proof-column-1 .proof-card,.proof-column-2 .proof-card{height:auto;min-height:280px}}
@media(prefers-reduced-motion:reduce){.business-collage .collage-photo{animation:none!important;opacity:1}.collage-extra{display:none}}
/* [codex] Fill the proof mosaic with two labeled scenes so no tall tile is left empty. */
.proof-column-2 .proof-visual{grid-column:3;grid-row:1}
.proof-column-2 .proof-card{grid-column:4;grid-row:2}
.proof-extra-0{grid-column:3;grid-row:2;background:#eee5f4}
.proof-extra-1{grid-column:4;grid-row:1;background:#edf0eb}
.proof-extra img,.proof-column-1 .proof-visual img{object-fit:cover;padding:0}
.proof-column-0 .proof-visual>span,.proof-column-2 .proof-visual>span{display:grid;place-items:center}
.proof-column-0 .proof-visual img,.proof-column-2 .proof-visual img{width:100%;height:auto;max-height:285px;object-fit:contain;padding:12px}
@media(max-width:1000px){.proof-column-2 .proof-visual,.proof-column-2 .proof-card,.proof-extra-0,.proof-extra-1{grid-column:auto;grid-row:auto;height:300px}}
@media(max-width:700px){.proof-extra-0,.proof-extra-1{height:260px}.proof-column-2 .proof-card{height:auto;min-height:280px}}
/* [codex] The main product link states its destination, matching the editorial showcase reference. */
.demo-showcase-card-0 .demo-showcase-copy .demo-showcase-action{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:22px;border-top:1px solid #aab6c0;padding-top:18px;color:#122334;font-size:18px;font-weight:500}
.demo-showcase-card-0 .demo-showcase-copy .demo-showcase-action b{position:static;display:inline;margin:0;border:0;padding:0;font-size:24px}

/* [codex] Keep mobile proof tiles in their source reading order. */
.proof-column-1 .proof-card{order:0}