/* KAMAI portfolio: image-led introduction and open project compositions. */
.km-portfolio-design{font-size:1rem;font-weight:400}
.km-portfolio-design .gridbg{display:none}
.km-portfolio-design .wrap{max-width:1400px;padding-inline:clamp(1.25rem,5vw,5rem)}
.km-portfolio-design .nav{background:#171412;padding-block:1.1rem}
.km-portfolio-design .nav .links{gap:1.25rem;font-size:1rem;flex-wrap:wrap}
.km-portfolio-design .nav .mark img{height:23px}
.km-portfolio-design .nav-back,.km-portfolio-design .nav .cta{font-size:.875rem}
.km-portfolio-opening{padding-block:clamp(3rem,5vw,5rem)}
.km-portfolio-title{display:grid;grid-template-columns:1.3fr 1fr;align-items:end;gap:3rem;margin-bottom:3rem}
.km-portfolio-title h1{font-family:Narkiss,Arial,sans-serif;font-size:clamp(4rem,8vw,8rem);line-height:1.03;font-weight:700}
.km-portfolio-title h1 span{color:#ff5a47}
.km-portfolio-title .eyebrow{font-size:.875rem;letter-spacing:0;margin-bottom:1rem}
.km-portfolio-intro p{font-size:1.15rem;line-height:1.9;color:#B8B5AE;margin-bottom:1.5rem}
.km-portfolio-strip{display:grid;grid-template-columns:.65fr 1fr 1.45fr;gap:1.25rem;align-items:center}
.km-portfolio-strip a{display:block;text-decoration:none;min-width:0}
.km-portfolio-strip img{width:100%;height:auto;display:block}
.km-portfolio-strip span{display:block;font-size:.875rem;margin-top:.8rem;color:#B8B5AE}
.km-strip-film img{aspect-ratio:9/16;object-fit:contain;max-height:410px;background:#171412}
.km-strip-brand{padding-top:3rem}
.km-strip-web img{aspect-ratio:8/5;object-fit:contain}
.km-portfolio-design .facts{margin-block:1rem 3rem}
.km-portfolio-design .fact{padding:1.2rem}
.km-portfolio-design .fact b{font-size:2.5rem}
.km-portfolio-design .fact span{font-size:.875rem}
.km-portfolio-design #work{background:#f4eee5;color:#171412;max-width:none;padding-inline:max(clamp(1.25rem,5vw,5rem),calc((100vw - 1240px)/2));padding-block:clamp(3rem,6vw,6rem)}
.km-portfolio-design #work .sec-head p{color:#171412;font-size:1rem;line-height:1.8}
.km-portfolio-design #work .sec-head h2{font-size:clamp(3rem,5vw,5rem);line-height:1.1}
.km-portfolio-design .project{grid-template-columns:1fr 1.6fr;gap:3rem;border-color:#17141233;padding-block:3rem}
.km-portfolio-design .project:first-of-type{grid-template-columns:1fr}
.km-portfolio-design .project:first-of-type .shot{order:-1}
.km-portfolio-design .project:first-of-type .p-text{display:grid;grid-template-columns:1fr 1fr;column-gap:3rem}
.km-portfolio-design .project:first-of-type .p-num,.km-portfolio-design .project:first-of-type h3,.km-portfolio-design .project:first-of-type .p-kind{grid-column:1}
.km-portfolio-design .project:first-of-type .km-case-detail{grid-column:2;grid-row:1/5;align-self:start}
.km-portfolio-design .project:first-of-type .p-tags{grid-column:1}
.km-portfolio-design .project:first-of-type .p-link,.km-portfolio-design .project:first-of-type .case-cta{justify-self:start}
.km-portfolio-design .shot{border:0;background:transparent;border-radius:0;box-shadow:none}
.km-portfolio-design .shot img{width:100%;height:auto;display:block;object-fit:contain;transform:none}
.km-portfolio-design .shot-cap{display:none}
.km-portfolio-design .p-num{font-size:.875rem;color:#711f33}
.km-portfolio-design .project h3{font-size:clamp(2.7rem,4vw,4rem);line-height:1.13}
.km-portfolio-design #work .p-kind{color:#711f33!important;font-size:.875rem;letter-spacing:0}
.km-portfolio-design #work .p-body,.km-portfolio-design #work .case-points dd{color:#171412;font-size:1rem;line-height:1.85}
.km-portfolio-design #work .case-points dt{color:#711f33;font-size:1rem}
.km-portfolio-design #work .case-cta a{color:#711f33;font-size:1rem}
.km-portfolio-design #work .p-tags span{border:0;border-inline-end:1px solid #17141240;border-radius:0;padding:.2rem .6rem;color:#171412;font-size:.875rem}
.km-portfolio-design #work .p-tags span:first-child{padding-inline-start:0}
.km-case-detail{margin-top:1.4rem;border-block:1px solid #17141233;padding:.8rem 0}
.km-case-detail summary{cursor:pointer;font-size:1rem;font-weight:500}
.km-case-detail[open] summary{color:#711f33}
.km-portfolio-design .sec-head h2{line-height:1.1}
.km-portfolio-design .sec-head p{font-size:1.05rem;line-height:1.8}
.km-portfolio-design #creative{padding-block:clamp(3rem,6vw,6rem)}
.km-portfolio-design .video-card video{object-fit:contain}
.km-portfolio-design a:focus-visible,.km-portfolio-design summary:focus-visible,.km-portfolio-design button:focus-visible{outline:3px solid #ff5a47;outline-offset:4px}
@media(max-width:1120px){.km-portfolio-design .nav .links{gap:.85rem;font-size:.875rem}.km-portfolio-design .nav-end{gap:.8rem}.km-portfolio-design .nav-back{display:none}}
@media(max-width:900px){.km-portfolio-design .project{grid-template-columns:1fr;gap:2rem}.km-portfolio-design .project .shot{order:-1}.km-portfolio-title{gap:2rem}.km-portfolio-strip{gap:1rem}}
@media(max-width:620px){.km-portfolio-title{grid-template-columns:1fr;gap:1.4rem;margin-bottom:2rem}.km-portfolio-title h1{font-size:clamp(4rem,14vw,5.5rem)}.km-portfolio-intro p{font-size:1rem}.km-portfolio-strip{grid-template-columns:1fr 1fr;gap:1.2rem}.km-strip-web{grid-column:1/-1}.km-strip-brand{padding-top:0}.km-portfolio-strip span{font-size:.875rem}.km-portfolio-design .project:first-of-type .p-text{display:block}.km-portfolio-design .project{padding-block:2.5rem}.km-portfolio-design .nav .mark img{height:20px}.km-portfolio-design .facts{margin-bottom:1rem}.km-portfolio-design .sec{padding-block:3rem}}
@media(prefers-reduced-motion:reduce){.km-portfolio-design *{scroll-behavior:auto!important}}
/* Native RTL scroll snapping, enhanced with buttons and pointer dragging. */
.km-work-reel{padding:clamp(3.5rem,6vw,6rem) 0 3rem;background:#171412;overflow:hidden;border-top:1px solid #f4eee52e}
.km-reel-head,.km-reel-end{padding-inline:clamp(1.25rem,5vw,5rem);display:flex;justify-content:space-between;align-items:end;gap:1.5rem;max-width:1440px;margin:auto}
.km-reel-head .km-eyebrow{color:#b8b5ae;margin-bottom:.8rem}
.km-home-design .km-reel-head h2{font-size:clamp(3rem,5.7vw,5.5rem);margin:0;line-height:1.05}
.km-rail-controls{display:flex;gap:.6rem;flex:none;direction:rtl}
.km-rail-controls button{background:transparent;border:1px solid currentColor;color:inherit;min-width:48px;min-height:48px;padding:.4rem;cursor:pointer;font:1.5rem/1 Arial,sans-serif;transition:background .2s,color .2s}
.km-rail-controls button:hover:not(:disabled){background:#f4eee5;color:#171412}
.km-rail-controls button:disabled{opacity:.25;cursor:default}
.km-rail{display:flex;direction:rtl;gap:clamp(1.2rem,3vw,3rem);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:clamp(1.25rem,5vw,5rem);padding:3rem clamp(1.25rem,5vw,5rem) 1.5rem;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:#b8b5ae55 transparent;cursor:grab;touch-action:pan-x pan-y;align-items:start}
.km-rail.is-dragging{scroll-snap-type:none;cursor:grabbing;user-select:none}
.km-rail.is-dragging a{cursor:grabbing}
.km-rail [data-rail-item]{scroll-snap-align:start;scroll-margin-inline:0;flex:none;min-width:0}
.km-reel-card{width:68%;max-width:900px}
.km-reel-card:nth-child(even){width:40%;max-width:520px}
.km-reel-media{height:clamp(250px,34vw,490px);display:block;overflow:hidden;background:#f4eee5;border:1px solid #f4eee522}
.km-reel-media img{width:100%;height:100%;display:block;object-fit:contain;transition:transform .45s;pointer-events:none}
.km-reel-brand .km-reel-media{background:#711f33}
.km-reel-film .km-reel-media{background:#711f33}
.km-reel-card.km-reel-film{width:35%;max-width:420px}
.km-reel-card:hover img{transform:scale(1.025)}
.km-reel-caption{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding-top:1rem}
.km-reel-caption p{color:#b8b5ae;font-size:1rem;margin:0 0 .2rem}
.km-home-design .km-reel-caption h3{font-size:2.5rem;line-height:1.2;margin:0}
.km-reel-caption a{color:inherit;text-decoration:none}
.km-reel-caption>a{font-size:1.7rem}
.km-reel-end{padding-top:1.5rem;align-items:center;font-size:1rem;color:#b8b5ae}
.km-reel-end p{margin:0;display:flex;gap:1.5rem;align-items:center}
.km-reel-end .km-text-link{color:#f4eee5}
@media(max-width:700px){.km-home-design .km-reel-head h2{font-size:2.8rem}.km-reel-head{align-items:end;gap:.75rem}.km-rail-controls button{min-width:42px;min-height:42px}.km-rail{padding-top:2rem;gap:1rem}.km-reel-card,.km-reel-card:nth-child(even),.km-reel-card.km-reel-film{width:87%;max-width:none}.km-reel-media{height:310px}.km-reel-caption p{font-size:.95rem}.km-home-design .km-reel-caption h3{font-size:2rem}.km-reel-end{font-size:.9rem;gap:1rem}.km-drag-hint{display:none}.km-reel-end .km-text-link{font-size:.95rem}}
@media(prefers-reduced-motion:reduce){.km-rail{scroll-behavior:auto!important}.km-reel-media img{transition:none}}
/* Dimensional cover and complete project slides. */
.km-portfolio-opening{overflow-x:clip}
.km-portfolio-design .km-portfolio-opening{padding-bottom:5rem}
.km-portfolio-design .km-portfolio-strip{perspective:1200px;gap:2.5rem;padding-inline:1rem}
.km-portfolio-design .km-strip-film{transform:rotate(5deg) translateY(1rem);position:relative;z-index:2}
.km-portfolio-design .km-strip-brand{transform:rotate(-7deg);position:relative;z-index:1}
.km-portfolio-design .km-strip-web{transform:rotate(4deg) translateY(-1rem);position:relative;z-index:3}
.km-portfolio-design .km-portfolio-strip img{box-shadow:14px 20px 0 #711f33,0 24px 50px #0006;border:1px solid #f4eee529}
.km-portfolio-design .km-portfolio-strip a{transition:transform .35s}
@media(hover:hover){.km-portfolio-design .km-portfolio-strip a:hover{transform:rotate(0deg) translateY(-.5rem)}}
.km-portfolio-design #work{padding-inline:0;overflow:hidden}
.km-portfolio-design #work>.sec-head{padding-inline:clamp(1.25rem,5vw,5rem);display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2rem;margin:0}
.km-portfolio-design #work>.sec-head>p{flex:1;max-width:48ch}
.km-portfolio-design #work .km-rail-controls{margin-inline-start:auto}
.km-portfolio-design #work .km-rail-controls button:hover:not(:disabled){background:#171412;color:#f4eee5}
.km-portfolio-design #work .km-project-rail{align-items:start;scrollbar-color:#17141250 transparent}
.km-portfolio-design #work .project{width:min(86%,1000px);display:flex;flex-direction:column;padding:0 0 2rem;border:0;gap:2rem;margin:0;opacity:1;transform:none}
.km-portfolio-design #work .project .shot{order:-1;width:100%;margin:0;box-shadow:10px 10px 0 #17141216}
.km-portfolio-design #work .project .shot img{height:clamp(240px,37vw,520px);width:100%;object-fit:contain;background:#e7e0d6}
.km-portfolio-design #work .project .p-text{display:block;width:100%;max-width:62ch;padding-inline:0}
.km-portfolio-design #work .project h3{font-size:3rem;margin-bottom:.35rem}
.km-portfolio-design #work .km-reel-end{color:#171412}
.km-portfolio-design .km-project-rail:focus-visible{outline:2px solid #711f33;outline-offset:-4px}
@media(max-width:700px){.km-portfolio-design .km-portfolio-strip{gap:1.5rem;padding-inline:.8rem}.km-portfolio-design .km-strip-web{margin-top:2rem}.km-portfolio-design #work .project{width:91%;gap:1.8rem}.km-portfolio-design #work .project .shot img{height:260px}.km-portfolio-design #work>.sec-head{align-items:end}.km-portfolio-design #work>.sec-head>p{flex-basis:100%;order:3}.km-portfolio-design #work .project h3{font-size:2.5rem}}
