/* Selected concept A: isolated from the page and product layouts. */
:root{--ink:#192331;--line:#e1e6ee}h2 em{color:#62718b}.landing-a h1 em{font-style:normal;color:var(--blue)}
.landing-a{position:relative;min-height:720px;height:calc(100svh - 98px);max-height:1000px;overflow:hidden;padding-top:104px}
.landing-a{background:radial-gradient(ellipse at 50% 50%,#f3f7ff,white 66%)}.center-intro{text-align:center;padding-top:24px;position:relative;z-index:3}.center-intro h1{font-size:39px;margin:16px 0 12px;letter-spacing:-2px}.center-intro p{font-size:11px;color:#778296}.original-stage{position:absolute;top:195px;left:0;right:0;height:260px}.giant{position:absolute;font-size:clamp(95px,15.6vw,225px);font-weight:900;letter-spacing:-.08em;line-height:1;top:45px;left:50%;transform:translateX(-50%);white-space:nowrap;color:#192331}.floating-card{position:absolute;overflow:hidden;border:6px solid white;border-radius:26px;background:#fff;box-shadow:0 20px 42px #24365322;animation:bob 7s ease-in-out infinite}.floating-card>div{height:180px;background:white}.floating-card .card-caption{display:flex;align-items:center;justify-content:space-between;padding:5px 16px}.floating-card .card-caption .logo{width:68px;height:42px}.floating-card .card-caption>span{font-size:20px;color:var(--blue)}.original-card{left:50%;top:0;width:205px;transform:translateX(-50%) rotate(-8deg)}.orb{position:absolute;border-radius:50%;background:radial-gradient(circle at 30% 25%,#fff,#ccdcff 25%,#88a9fc 55%,#3455ed 90%);box-shadow:10px 15px 24px #5879c325;animation:bob 8s ease-in-out infinite}.orb-one{width:113px;height:113px;left:11%;top:-22px}.ring{position:absolute;border:25px solid #c7d6ff;border-radius:50%;box-shadow:inset 6px 7px 7px #5377d644,7px 10px #96b1ee,13px 16px 23px #5377d633;animation:tilt 9s ease-in-out infinite}.ring-one{width:110px;height:110px;right:16%;top:-95px;transform:rotateX(25deg) rotateY(-25deg)}.cube{position:absolute;width:95px;height:95px;right:10%;top:125px;border-radius:25px;background:linear-gradient(135deg,#edf4ff,#9fbcff 60%,#6288ec);box-shadow:inset 8px 9px 14px #fff8,10px 20px 25px #3455ed17;transform:rotate(20deg);animation:bob 10s ease-in-out infinite}.spark{position:absolute;left:25%;top:160px;font-size:93px;line-height:1;color:#a9bffc;text-shadow:4px 6px #7195e6;animation:turn 30s linear infinite}.round-sticker{position:absolute;left:calc(50% + 58px);top:147px;border-radius:50%;background:#eaf0ff;border:4px solid white;width:97px;height:97px;display:grid;place-content:center;text-align:center;font-size:12px;transform:rotate(12deg)}.round-sticker i{font-family:Georgia,serif;font-size:17px}.original-bottom{position:absolute;bottom:20px;left:0;right:0;display:flex;align-items:center;flex-direction:column;gap:12px}.original-bottom .cta{padding:12px 22px}

.logo{display:block;position:relative;overflow:hidden;width:132px;height:56px;flex-shrink:0;background:white}.logo img{object-fit:contain}.logo-oter{width:100px;height:64px}.logo-clean{width:64px;height:64px}.logo-ohfit img{position:absolute;width:120%;height:auto;max-width:none;top:50%;left:50%;transform:translate(-50%,-50%)}.logo-ribbon{height:98px;border-top:1px solid #e8ecf3;border-bottom:1px solid #e8ecf3;display:flex;align-items:center;padding:0 5%;gap:30px;background:white}.ribbon-title{font-size:9px;letter-spacing:1.4px;color:#65728a;min-width:160px;line-height:1.9}.ribbon-title b{font-weight:400;letter-spacing:0;font-size:10px}.ribbon-window{overflow:hidden;flex:1;mask-image:linear-gradient(to right,transparent,black 7%,black 93%,transparent)}.logo-track{display:flex;width:max-content;animation:marquee 24s linear infinite}.logo-group{display:flex;align-items:center;gap:48px;padding-right:48px;flex-shrink:0}.logo-plus{font-size:13px;color:#cad4e6}.logo-ribbon .motion-control{border:1px solid #dce3ef;background:white;border-radius:50%;width:32px;height:32px;color:#3455ed;font-size:11px;flex-shrink:0}.logo-ribbon:hover .logo-track,.logo-ribbon:focus-within .logo-track{animation-play-state:paused}.paused *{animation-play-state:paused!important}

.landing-a .center-intro h1{font-size:clamp(35px,3.7vw,53px);font-weight:500;line-height:1.3;margin:17px 0 15px}.landing-a .center-intro p{font-size:13px;line-height:1.8;margin:0 20px}.landing-a .eyebrow{font-size:9px;letter-spacing:1.8px;color:#65728b}.landing-a .original-stage{top:340px;height:300px;translate:var(--px,0px) var(--py,0px);transition:translate .5s ease-out}.landing-a .giant{font-size:clamp(95px,15.6vw,225px);top:45px}.floating-card>div:first-child{height:205px}.floating-card img{height:100%;width:100%;object-fit:contain}.floating-card .card-caption{height:58px;background:white}.original-card{width:235px;z-index:2;transition:box-shadow .35s,rotate .35s}.original-card:hover{rotate:5deg;box-shadow:0 28px 50px #24365330}.round-sticker{z-index:3;pointer-events:none;top:175px;left:calc(50% + 66px)}.original-bottom .cta{display:inline-flex;align-items:center;gap:32px;background:var(--blue);color:white;border-radius:40px;padding:14px 24px;font-size:12px;transition:transform .3s}.original-bottom .cta:hover{transform:translateY(-3px)}.original-bottom .micro{font-size:8px;letter-spacing:1.7px;color:#69758a}.landing-a .original-bottom{bottom:25px}.orb-one{left:12%;top:-15px}.ring-one{right:15%;top:-65px}.cube{right:11%;top:140px}.spark{left:25%;top:175px}.logo-ribbon .motion-control{width:44px;height:44px;flex-shrink:0}.logo-ribbon .logo img{width:100%;height:100%;object-fit:contain}.logo-ribbon .logo-ohfit img{height:auto;width:120%}.logo-ribbon a{display:block}.logo-ribbon{overflow:hidden}.ribbon-window{min-width:0}.logo-group{min-width:650px;justify-content:space-around}.logo-track{animation-duration:28s}.logo-ribbon .logo{background:transparent}.logo-ribbon .logo-plus{color:#adb9d0}
@keyframes bob{50%{translate:0 -14px}}@keyframes turn{to{rotate:360deg}}@keyframes tilt{50%{rotate:15deg;translate:0 -12px}}
.brand-visual{transition:border-color .4s,box-shadow .4s,transform .4s}.brand-visual:hover{border-color:#a7baff;box-shadow:0 15px 34px #3455ed0b;transform:translateY(-4px)}.mini-sculpture i{border-color:#b7cbff;box-shadow:7px 8px 0 #7c9dec}.mini-sculpture b{background:radial-gradient(circle at 30% 20%,white,#bdd2ff 55%,#6d94ed)}.contact-orb{background:radial-gradient(circle at 30% 20%,white,#c7d8ff 55%,#729af3);animation:bob 9s ease-in-out infinite;z-index:0;pointer-events:none}.contact>*:not(.contact-orb){position:relative;z-index:1}.brand-next>p{font-size:13px;color:#63728a;margin:-10px 0 26px}.about-copy p,.section-title p,.product p,.product-feature p,.steps p,.cover-copy>p{color:#667184}.product-facts dt,.small-note,.category,.section-label span:last-child{color:#667184}.product>div{border:1px solid #edf0f5}.source-detail{scroll-margin-top:100px}.source-detail summary{min-height:60px}.gif-toggle{min-height:44px}.motion-paused .original-stage{translate:0 0}.motion-paused .reveal{transition:none;opacity:1;transform:none}
@media(min-height:950px) and (min-width:801px){.landing-a .original-stage{top:400px;scale:1.1}.landing-a .center-intro{padding-top:45px}}
@media(max-width:900px){header{gap:5px}nav a{padding:10px 8px}.nav-contact{padding:11px 13px}.logo-group{min-width:600px}.ribbon-title{min-width:110px}}
@media(max-width:700px){.landing-a{height:710px;min-height:710px;padding-top:104px}.landing-a .center-intro{padding-top:22px}.landing-a .center-intro h1{font-size:clamp(29px,6.4vw,39px);letter-spacing:-1.8px}.landing-a .center-intro p{font-size:11px;max-width:310px;margin:0 auto;padding:0 12px}.landing-a .original-stage{top:338px;height:245px}.landing-a .giant{font-size:105px;top:55px}.original-card{width:185px}.floating-card>div:first-child{height:160px}.floating-card .card-caption{height:46px;padding:3px 10px}.floating-card .card-caption .logo{height:36px;width:58px}.round-sticker{width:80px;height:80px;top:147px;left:calc(50% + 46px);font-size:10px}.round-sticker i{font-size:14px}.orb-one{width:70px;height:70px;left:4%;top:-22px}.ring-one{width:65px;height:65px;border-width:16px;right:6%;top:-70px}.cube{width:59px;height:59px;border-radius:16px;right:4%;top:157px}.spark{font-size:58px;left:13%;top:173px}.landing-a .original-bottom{bottom:25px}.logo-ribbon{height:88px;padding:0 16px;gap:8px}.ribbon-title{display:none}.logo-group{gap:25px;padding-right:25px;min-width:480px}.logo-ribbon .logo{width:100px;height:48px}.logo-ribbon .logo-oter{width:65px}.logo-ribbon .logo-clean{width:46px}.logo-track{animation-duration:23s}.brand-next>a:not(.text-link){font-size:24px;line-height:1.6}.product-grid{grid-template-columns:1fr 1fr}.about h2,.brand-story h2{font-size:36px}.cover-copy h1{font-size:38px}.contact-orb{right:-85px}.filters button{min-height:44px}}
@media(max-width:600px){.product-grid{grid-template-columns:1fr}.mobile-toggle{min-width:44px;min-height:44px}header{padding:5px 9px 5px 16px;gap:4px}.nav-contact{font-size:10px;padding:11px 12px}.nav-contact span{margin-left:8px}.menu-open nav{flex-wrap:wrap}.menu-open nav a{min-height:44px;font-size:12px}.footer-details a{padding:8px 0}.brand-page .cover-copy h1{font-size:clamp(32px,9vw,39px)}.brand-info{gap:10px}.brand-info p{font-size:11px}}
@media(max-width:360px){.wordmark{font-size:18px;gap:5px}.nav-contact{padding:10px}.nav-contact span{display:none}.landing-a .center-intro h1{font-size:29px}.filters button{padding:10px}.filters small{margin-left:5px}.brand-info{display:block}.brand-info p{margin-top:7px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.original-stage{translate:0 0!important}}

/* design-v1.2: problem to solution, restrained motion and consistent product framing */
.landing-a .center-intro h1{font-size:clamp(29px,3.35vw,48px);letter-spacing:-1.8px;padding:0 16px;word-break:keep-all}
.product>div{background:#f3f5f6;border:0;box-shadow:0 0 0 1px #e8edf1 inset;transition:box-shadow .45s,translate .45s}.product img{object-fit:cover;object-position:center;transition:transform .65s cubic-bezier(.2,.65,.3,1)}
.product:has(img[src*="hellocala"])>div{aspect-ratio:1}.product:has(img[src*="hellocala"]) img{object-fit:contain;background:#f7f7f5}.product:has(img[src*="oter-cleaner"]) img,.product:has(img[src*="allgrae"]) img,.product:has(img[src*="clean24"]) img{object-fit:contain;background:white}
@media(hover:hover) and (pointer:fine){a.product:hover>div{translate:0 -5px;box-shadow:0 18px 32px #24365312}a.product:hover img{transform:scale(1.035)}}
.solution-particles{position:absolute;inset:0;pointer-events:none;z-index:1}.solution-particles i{position:absolute;left:50%;top:100px;width:7px;height:7px;border-radius:50%;background:#86a8fc;opacity:0;--x:-250px;--y:-120px;animation:solution-gather 2.4s cubic-bezier(.2,.7,.25,1) both;animation-delay:calc(var(--n)*.09s)}
.solution-particles i:nth-child(2){--x:270px;--y:-60px}.solution-particles i:nth-child(3){--x:-180px;--y:120px;width:30px;height:2px}.solution-particles i:nth-child(4){--x:210px;--y:150px}.solution-particles i:nth-child(5){--x:80px;--y:-150px;width:24px;height:2px}.solution-particles i:nth-child(6){--x:-310px;--y:30px}
@keyframes solution-gather{0%{transform:translate(var(--x),var(--y));opacity:0}18%{opacity:.65}75%{opacity:.5}100%{transform:translate(0,0);opacity:0}}
.source-detail img{display:block;margin:0 auto;max-width:100%;height:auto}
@media(max-width:700px){.landing-a .center-intro h1{font-size:clamp(22px,5.9vw,38px);letter-spacing:-1.15px;padding:0 12px}.solution-particles{scale:.55}.product:hover img{transform:none}}
@media(prefers-reduced-motion:reduce){.solution-particles{display:none}.product>div{transition:none}a.product:hover>div{translate:none}}

/* Additional portfolio photos retain the full original package composition. */
.product-added>div{background:white;box-shadow:none}.product-added img{object-fit:contain;background:white}.product-added:hover img{transform:none}

/* design-v1.4: Matdokkaebi, original logo and two selected photographs. */
.logo-mat{width:70px;height:70px}.brand-visual.mat{background:white;border:1px solid #e5eaf2}.brand-visual>.mat-logo{width:190px;height:190px}.mat-logo img{width:100%;height:100%;object-fit:contain}.mat-hero-logo{display:block;width:116px;height:116px;margin-bottom:22px}.mat-hero-logo img{width:100%;height:100%;object-fit:contain}.mat-photo{margin:0;min-width:0}.mat-photo img{display:block;width:100%;height:auto;border-radius:24px}.mat-photo figcaption{padding-top:14px;font-size:11px;color:#728096;text-align:right}.mat-page .cover-grid{gap:64px}.mat-page .cover-copy h1{font-size:clamp(34px,3.8vw,54px);letter-spacing:-2px;line-height:1.35}.mat-page .cover-copy h1 em{color:#192331}.mat-promise{background:#f6f8fc}.mat-promise h2,.mat-menu h2{font-size:clamp(30px,3.5vw,46px);line-height:1.4;letter-spacing:-1.7px}.mat-intro{margin:24px 0 45px;color:#667184;font-size:15px;line-height:1.9}.mat-values{display:grid;grid-template-columns:repeat(3,1fr);gap:36px}.mat-values article{border-top:1px solid #d9e1ee;padding-top:25px}.mat-values article>span{font-size:12px;color:var(--blue)}.mat-values h3{font-size:22px;margin:22px 0 14px}.mat-values p,.mat-menu-grid p{font-size:14px;line-height:1.9;color:#667184}.mat-menu-grid{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:70px}.mat-menu-grid h2{margin:18px 0}.mat-menu-list{padding:0;list-style:none;margin:28px 0 0}.mat-menu-list li{display:flex;justify-content:space-between;gap:12px;border-top:1px solid #e1e6ee;padding:16px 0;font-size:15px}.mat-menu-list span{font-size:12px;color:#728096}.mat-page h1,.mat-page h2,.mat-page p{word-break:keep-all}.mat-page .cover-copy{animation:mat-enter .7s ease both}@keyframes mat-enter{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media(max-width:800px){.mat-page .cover-grid,.mat-menu-grid{grid-template-columns:1fr;gap:36px}.mat-values{grid-template-columns:1fr;gap:24px}.mat-values h3{margin:12px 0}.mat-page .cover-copy h1{font-size:38px}.mat-hero-logo{width:94px;height:94px;margin-bottom:16px}.mat-photo img{border-radius:18px}.mat-intro{font-size:13px}.mat-menu-list li{font-size:14px}.logo-ribbon .logo-mat{width:55px;height:55px}}
@media(prefers-reduced-motion:reduce){.mat-page .cover-copy{animation:none}}

.contact-consent{display:flex!important;align-items:flex-start;gap:10px;font-size:12px!important;line-height:1.8}.contact-consent input{width:16px!important;flex-shrink:0;margin-top:4px}.contact-honeypot{position:absolute!important;left:-10000px;width:1px;height:1px;overflow:hidden}#contact-form button:disabled{opacity:.5;cursor:wait}#contact-verification{margin:12px 0}