/* Editorial product stage; inspiration: Photo print app launch film / Prompt Motion. */
#portfolio[data-motion-portfolio]{background:#e8f7fc;padding-block:80px;--motion-ink:#102d3d;color:var(--motion-ink)}
#portfolio[data-motion-portfolio] .motion-heading{display:flex;align-items:end;justify-content:space-between;gap:32px;margin-bottom:32px}
#portfolio[data-motion-portfolio] .motion-heading h2{font-size:clamp(34px,4.4vw,62px);line-height:1.04;letter-spacing:-.055em;max-width:700px;margin:0 0 18px;color:var(--motion-ink);text-transform:none}
#portfolio[data-motion-portfolio] .motion-heading p{margin:0;max-width:470px;font-size:16px;line-height:1.6;color:#41606f}
#portfolio[data-motion-portfolio] .motion-heading>a{display:inline-flex;align-items:center;justify-content:center;min-height:48px;border:1px solid #aac4d0;border-radius:999px;padding:12px 22px;white-space:nowrap;text-decoration:none;font-weight:650}
#portfolio[data-motion-portfolio] .motion-stage[hidden]{display:none!important}
#portfolio[data-motion-portfolio].is-enhanced .motion-stage{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);border:1px solid #bfd6df;border-radius:28px;overflow:hidden;background:#fcfdfd;margin-bottom:26px;min-height:520px;scroll-margin-top:96px}
#portfolio[data-motion-portfolio] .motion-story{display:flex;flex-direction:column;align-items:start;padding:38px 34px;min-width:0;position:relative}
#portfolio[data-motion-portfolio] .motion-kicker{display:flex;align-items:center;gap:12px;font-size:12px;font-weight:650;color:#486573;margin:0 0 44px}
#portfolio[data-motion-portfolio] .motion-mark{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:30px;background:var(--motion-ink);color:white;border-radius:9px;font-size:14px;font-weight:800;letter-spacing:-1px;overflow:hidden}
#portfolio[data-motion-portfolio] .motion-story h3{font-size:clamp(30px,3.8vw,50px);line-height:1.05;letter-spacing:-.045em;margin:0 0 18px;overflow-wrap:anywhere}
#portfolio[data-motion-portfolio] .motion-title-mask{overflow:hidden;max-width:100%}
#portfolio[data-motion-portfolio] .motion-category{font-size:12px;line-height:1.5;letter-spacing:.04em;color:#567180;margin:0 0 12px}
#portfolio[data-motion-portfolio] .motion-description{font-size:16px;line-height:1.65;margin:0 0 24px;color:#486573;max-width:360px}
#portfolio[data-motion-portfolio] .motion-open{display:inline-flex;align-items:center;gap:24px;min-height:48px;background:var(--motion-ink);color:white;border-radius:999px;padding:12px 23px;text-decoration:none;font-weight:650}
#portfolio[data-motion-portfolio] .motion-open span{font-size:20px}
#portfolio[data-motion-portfolio] .motion-nav{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:28px}
#portfolio[data-motion-portfolio] .motion-nav button{width:46px;height:46px;border:1px solid #bfd2db;border-radius:50%;background:transparent;font-size:22px;color:var(--motion-ink);cursor:pointer}
#portfolio[data-motion-portfolio] .motion-count{font-size:13px;padding:0 8px;font-variant-numeric:tabular-nums;color:#567180}
#portfolio[data-motion-portfolio] .motion-visual{position:relative;display:flex;justify-content:center;align-items:center;min-width:0;min-height:520px;background:#b9e2ed;isolation:isolate;overflow:hidden;box-sizing:border-box;padding-bottom:60px;touch-action:pan-y;--scene-warm:0;--scene-scale:1}
#portfolio[data-motion-portfolio] .motion-visual::before{content:"";position:absolute;inset:0;background:#f4c694;opacity:var(--scene-warm);z-index:-1}
#portfolio[data-motion-portfolio] .motion-shadow{position:absolute;inset:-50%;background:repeating-linear-gradient(112deg,transparent 0 90px,#254b5e09 90px 180px);transform:rotate(-8deg);pointer-events:none}
#portfolio[data-motion-portfolio] .motion-device{position:relative;width:83%;height:360px;background:#f8fcff;border:1px solid #ffffffb3;border-radius:14px;box-shadow:0 26px 42px #173c4d26;overflow:hidden;transform:scale(var(--scene-scale));transition:width .65s cubic-bezier(.22,1,.36,1),height .65s cubic-bezier(.22,1,.36,1),border-radius .65s,border-width .65s,background .65s}
#portfolio[data-motion-portfolio] .motion-browser-bar{height:30px;background:#ffffffdf;display:flex;align-items:center;gap:4px;padding:0 12px;font-size:10px;color:#527183}
#portfolio[data-motion-portfolio] .motion-browser-bar i{width:5px;height:5px;border-radius:50%;background:#9eb9c7}
#portfolio[data-motion-portfolio] .motion-browser-bar span{margin-left:auto;max-width:75%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#portfolio[data-motion-portfolio] .motion-picture{cursor:zoom-in;display:block;width:100%;height:calc(100% - 30px);object-fit:cover;object-position:50% 0;user-select:none;-webkit-user-drag:none}
#portfolio[data-motion-portfolio] .motion-device[data-format=phone]{width:218px;height:438px;border:8px solid #153344;border-radius:32px;background:#153344}
#portfolio[data-motion-portfolio] .motion-device[data-format=phone] .motion-browser-bar{height:14px;width:72px;border-radius:0 0 11px 11px;position:absolute;left:calc(50% - 36px);top:0;z-index:2;background:#153344;padding:0}
#portfolio[data-motion-portfolio] .motion-device[data-format=phone] .motion-browser-bar>*{visibility:hidden}
#portfolio[data-motion-portfolio] .motion-device[data-format=phone] .motion-picture{height:100%;border-radius:22px;object-fit:cover;object-position:top}
#portfolio[data-motion-portfolio] .motion-device[data-format=frame]{width:79%;height:355px;border:14px solid #fcfaf3;border-radius:2px;box-shadow:0 20px 28px #173c4d2b}
#portfolio[data-motion-portfolio] .motion-device[data-format=frame] .motion-browser-bar{display:none}
#portfolio[data-motion-portfolio] .motion-device[data-format=frame] .motion-picture{height:100%}
#portfolio[data-motion-portfolio] .motion-device[data-frame=dark]{border-color:#143344}
#portfolio[data-motion-portfolio] .motion-iris{position:absolute;inset:-1px;pointer-events:none;overflow:hidden;z-index:4}
#portfolio[data-motion-portfolio] .motion-iris i{position:absolute;inset:-50%;background:#112c3c;clip-path:polygon(50% 50%,100% 0,100% 100%);visibility:hidden}
#portfolio[data-motion-portfolio] .motion-lens{display:none;position:absolute;width:154px;height:154px;border-radius:50%;border:2px solid #ffffffdd;box-shadow:0 4px 20px #112c3c45,inset 0 0 0 5px #ffffff33;pointer-events:none;z-index:5;background-repeat:no-repeat;background-color:#f9fcff;left:var(--lens-x);top:var(--lens-y);transform:translate(-50%,-50%)}
#portfolio[data-motion-portfolio] .motion-visual.is-inspecting .motion-lens{display:block}
#portfolio[data-motion-portfolio] .motion-toolbar{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);max-width:calc(100% - 28px);display:flex;align-items:center;gap:4px;padding:6px;border:1px solid #ffffffb3;border-radius:999px;background:#f7fcffbf;backdrop-filter:blur(18px) saturate(1.3);box-shadow:inset 0 1px #ffffffa3,0 8px 28px #18384e15;z-index:6}
#portfolio[data-motion-portfolio] .motion-toolbar button{background:none;border:0;border-radius:999px;min-height:36px;padding:8px 12px;white-space:nowrap;color:#294958;font-size:12px;cursor:pointer}
#portfolio[data-motion-portfolio] .motion-toolbar button[aria-pressed=true]{background:#18394d;color:white}
#portfolio[data-motion-portfolio] .motion-settings{display:flex;align-items:center;gap:9px;margin-left:auto;padding:10px 0 0;font-size:11px;color:#567180}
#portfolio[data-motion-portfolio] .motion-settings label{display:flex;align-items:center;gap:5px}
#portfolio[data-motion-portfolio] .motion-settings input{width:62px;min-height:28px;accent-color:#153b50}
#portfolio[data-motion-portfolio] .motion-settings button{border:1px solid #b7cfd9;border-radius:50%;width:32px;height:32px;cursor:pointer;background:#fdfcf7;color:#163847;padding:0;font-size:12px}
#portfolio[data-motion-portfolio] .motion-settings button[aria-pressed=true]{background:#163847;color:white}
#portfolio[data-motion-portfolio] .motion-help{font-size:11px;color:#567180;margin:10px 0 0;line-height:1.5}
#portfolio[data-motion-portfolio] .motion-live{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#portfolio[data-motion-portfolio] .ia9-portfolio__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
#portfolio[data-motion-portfolio] .ia9-portfolio__card{position:relative;display:flex;flex-direction:column;grid-column:auto;min-width:0;background:#f7fcfe;border:1px solid #b9d3df;border-radius:18px;overflow:hidden;box-shadow:none;transition:border-color .2s,background .2s}
#portfolio[data-motion-portfolio] .ia9-portfolio__card.is-selected{border-color:#153b50;background:#fff}
#portfolio[data-motion-portfolio] .ia9-portfolio__project{display:flex;flex-direction:column;flex:1;color:inherit;text-decoration:none;min-width:0}
#portfolio[data-motion-portfolio] .ia9-portfolio__image{height:auto;aspect-ratio:1.7;background:#d6e9f0;padding:0;border:0;border-radius:0;overflow:hidden}
#portfolio[data-motion-portfolio] .ia9-portfolio__image img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;filter:none;border-radius:0;transform:none;transition:transform .6s cubic-bezier(.22,1,.36,1)}
#portfolio[data-motion-portfolio] .ia9-portfolio__image::after{display:none}
#portfolio[data-motion-portfolio] .ia9-portfolio__image--mobile img{object-fit:cover;object-position:50% 12%}
#portfolio[data-motion-portfolio] .ia9-portfolio__body{padding:18px 20px;min-width:0}
#portfolio[data-motion-portfolio] .ia9-portfolio__body h3{font-size:23px;line-height:1.15;letter-spacing:-.025em;margin:0 0 10px;overflow-wrap:anywhere;color:#153344}
#portfolio[data-motion-portfolio] .ia9-portfolio__type{font-size:10px;color:#527080;margin:0 0 8px;line-height:1.4}
#portfolio[data-motion-portfolio] .ia9-portfolio__description{font-size:13px;line-height:1.55;color:#527080;margin:0 0 16px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
#portfolio[data-motion-portfolio] .ia9-portfolio__more{font-size:12px;color:#153b50;margin:0;display:flex;align-items:center;justify-content:space-between}
#portfolio[data-motion-portfolio] .ia9-portfolio__launch{margin:0 20px 18px;padding:10px 14px;min-height:42px;font-size:12px;border-radius:10px}
#portfolio[data-motion-portfolio] .ia9-portfolio__badge{left:12px;top:12px;font-size:10px;padding:6px 8px;max-width:calc(100% - 24px)}
#portfolio[data-motion-portfolio] .motion-select{display:none}
#portfolio[data-motion-portfolio].is-enhanced .motion-select{display:block;text-align:left;background:transparent;border:0;border-top:1px solid #cfdee6;color:#153b50;min-height:42px;padding:10px 20px;cursor:pointer;font-size:12px;font-weight:650}
#portfolio[data-motion-portfolio] .motion-select[aria-pressed=true]{background:#16394c;color:#fff}
#portfolio[data-motion-portfolio] :is(button,a,input){scroll-margin-block:104px 64px}
#portfolio[data-motion-portfolio] :is(button,a,input):focus-visible{outline:3px solid #9e2869;outline-offset:3px}
#portfolio[data-motion-portfolio] .ia9-portfolio__card :is(a,button):focus-visible{outline-offset:-4px}
#portfolio[data-motion-portfolio] .motion-select[aria-pressed=true]:focus-visible{outline-color:#fff}
@media(hover:hover) and (prefers-reduced-motion:no-preference){#portfolio[data-motion-portfolio] .ia9-portfolio__card:hover .ia9-portfolio__image img{transform:scale(1.035)}}
@media(max-width:1000px){#portfolio[data-motion-portfolio].is-enhanced .motion-stage{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}#portfolio[data-motion-portfolio] .motion-story{padding:30px 24px}#portfolio[data-motion-portfolio] .motion-settings{flex-wrap:wrap}#portfolio[data-motion-portfolio] .ia9-portfolio__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){#portfolio[data-motion-portfolio]{padding-block:52px}#portfolio[data-motion-portfolio] .motion-heading{align-items:start;flex-direction:column;gap:20px}#portfolio[data-motion-portfolio].is-enhanced .motion-stage{display:flex;flex-direction:column-reverse;border-radius:22px}#portfolio[data-motion-portfolio] .motion-visual{min-height:390px}#portfolio[data-motion-portfolio] .motion-device{height:250px}#portfolio[data-motion-portfolio] .motion-device[data-format=phone]{height:310px;width:156px;border-width:6px;border-radius:25px}#portfolio[data-motion-portfolio] .motion-device[data-format=frame]{height:250px}#portfolio[data-motion-portfolio] .motion-story{padding:25px 22px}#portfolio[data-motion-portfolio] .motion-kicker{margin-bottom:24px}#portfolio[data-motion-portfolio] .motion-story h3{font-size:34px}#portfolio[data-motion-portfolio] .motion-description{max-width:none}#portfolio[data-motion-portfolio] .motion-nav{padding-top:22px}#portfolio[data-motion-portfolio] .motion-settings{padding-top:0;margin-left:0;max-width:100%}#portfolio[data-motion-portfolio] .motion-toolbar{bottom:12px}#portfolio[data-motion-portfolio] .motion-toolbar button{font-size:11px;padding:7px 10px}#portfolio[data-motion-portfolio] .motion-help{max-width:260px}#portfolio[data-motion-portfolio] .ia9-portfolio__grid{gap:14px}#portfolio[data-motion-portfolio] .ia9-portfolio__body{padding:14px}#portfolio[data-motion-portfolio] .ia9-portfolio__body h3{font-size:19px}#portfolio[data-motion-portfolio] .ia9-portfolio__description{display:none}#portfolio[data-motion-portfolio] .ia9-portfolio__type{font-size:9px}#portfolio[data-motion-portfolio] .ia9-portfolio__image{aspect-ratio:1.3}#portfolio[data-motion-portfolio] .motion-select{padding-inline:14px}#portfolio[data-motion-portfolio] .ia9-portfolio__more{font-size:11px}#portfolio[data-motion-portfolio] .ia9-portfolio__launch{margin:0 14px 14px;font-size:11px}}
@media(max-width:360px){#portfolio[data-motion-portfolio] .ia9-portfolio__grid{grid-template-columns:minmax(0,1fr)}#portfolio[data-motion-portfolio] .ia9-portfolio__image{aspect-ratio:1.8}#portfolio[data-motion-portfolio] .motion-settings{gap:6px}#portfolio[data-motion-portfolio] .motion-story{padding:22px 18px}}
@media(prefers-reduced-motion:reduce){#portfolio[data-motion-portfolio] *,#portfolio[data-motion-portfolio] *::before{transition:none!important;animation:none!important}#portfolio[data-motion-portfolio] .motion-shadow{transform:none}}