@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500&family=DM+Serif+Display:ital@0;1&display=swap');

:root{
  --paper:#d8d0cb;
  --ink:#11100f;
  --acid:#dfff2f;
  --violet:#bba0df;
  --blue:#347be3;
  --orange:#f36c28;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--paper)}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',Arial,sans-serif;overflow-x:hidden}
button,input{font:inherit}
button{color:inherit}
img{display:block;width:100%}
.ec-noise{position:fixed;inset:0;z-index:50;pointer-events:none;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E")}
.ec-header{position:fixed;top:0;left:0;right:0;height:68px;z-index:60;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(18px,3vw,48px);mix-blend-mode:normal;background:linear-gradient(to bottom,rgba(17,16,15,.28),transparent);color:#fff}
.ec-back,.ec-header-meta{font-size:10px;letter-spacing:.13em;text-transform:uppercase}
.ec-back{border:0;background:none;cursor:pointer;padding:8px 0}
.ec-header-meta{display:flex;gap:24px}
.ec-gate{height:100svh;min-height:680px;position:relative;overflow:hidden;background:#8497bd;color:#fff}
.ec-gate-media{position:absolute;inset:-5%;transform:scale(1.08);filter:blur(24px) saturate(.72);opacity:.88}
.ec-gate-media img{height:100%;object-fit:cover;object-position:center}
.ec-gate-overlay{position:absolute;inset:0;background:linear-gradient(135deg,rgba(60,78,115,.46),rgba(215,226,245,.18) 50%,rgba(17,16,15,.26))}
.ec-gate-content{position:relative;z-index:2;height:100%;display:grid;grid-template-rows:auto 1fr auto;align-items:center;padding:90px clamp(22px,4vw,64px) 38px}
.ec-gate-kicker{display:flex;justify-content:space-between;font-size:10px;letter-spacing:.14em}
.ec-lock-wrap{display:flex;justify-content:center;align-items:center}
.ec-lock{width:74px;height:74px;border:1px solid rgba(255,255,255,.72);border-radius:50%;background:rgba(255,255,255,.16);backdrop-filter:blur(12px);cursor:pointer;position:relative;transition:transform .55s var(--ease),background .35s ease}
.ec-lock:hover{transform:scale(1.09) rotate(-3deg);background:rgba(255,255,255,.28)}
.ec-lock-shackle{position:absolute;width:22px;height:23px;border:3px solid #fff;border-bottom:0;border-radius:15px 15px 0 0;left:25px;top:18px}
.ec-lock-body{position:absolute;left:21px;top:36px;width:32px;height:25px;border-radius:5px;background:#fff}
.ec-lock-dot{position:absolute;width:4px;height:8px;border-radius:5px;background:#7c8eae;left:14px;top:8px}
.ec-gate-title{position:absolute;left:clamp(22px,4vw,64px);bottom:clamp(38px,6vw,82px);display:flex;flex-direction:column;font-size:clamp(52px,10vw,150px);line-height:.8;letter-spacing:-.065em;font-weight:500;mix-blend-mode:screen}
.ec-gate-title span:last-child{font-family:'DM Serif Display',Georgia,serif;font-style:italic;font-weight:400;margin-left:clamp(20px,9vw,160px)}
.ec-gate-note{position:absolute;right:clamp(22px,4vw,64px);bottom:102px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;max-width:180px;line-height:1.5}
.ec-enter{position:absolute;right:clamp(22px,4vw,64px);bottom:45px;border:1px solid rgba(255,255,255,.7);background:rgba(255,255,255,.08);color:#fff;border-radius:999px;padding:12px 17px;font-size:10px;letter-spacing:.12em;cursor:pointer;backdrop-filter:blur(8px);transition:background .3s ease,transform .4s var(--ease)}
.ec-enter:hover{background:rgba(255,255,255,.2);transform:translateY(-3px)}
.ec-project{display:none;background:var(--paper);padding-top:1px}
.ec-project.is-open{display:block}
.ec-project-intro{padding:clamp(110px,13vw,180px) clamp(22px,4vw,64px) 80px}
.ec-label{display:flex;justify-content:space-between;gap:20px;padding-bottom:13px;border-bottom:1px solid rgba(17,16,15,.4);font-size:10px;letter-spacing:.13em;text-transform:uppercase}
.ec-intro-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,.72fr);gap:8vw;padding-top:7vw;align-items:end}
.ec-intro-grid h1{margin:0;font-size:clamp(52px,9vw,140px);line-height:.82;letter-spacing:-.065em;font-weight:500}
.ec-intro-grid h1 em{font-family:'DM Serif Display',Georgia,serif;font-weight:400}
.ec-intro-copy{max-width:450px;font-size:15px;line-height:1.5}
.ec-intro-copy p{margin:0 0 20px}.ec-muted{opacity:.58}
.ec-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:18px;padding:0 clamp(14px,2.5vw,36px) 110px}
.ec-piece,.ec-module{margin:0;min-width:0}
.ec-piece .ec-media{overflow:hidden;background:#bbb;position:relative}
.ec-piece img{height:100%;object-fit:cover;transition:transform 1s var(--ease),filter .8s ease}
.ec-piece:hover img{transform:scale(1.035);filter:saturate(1.05)}
.ec-piece figcaption{display:flex;justify-content:space-between;padding:10px 2px 0;font-size:9px;letter-spacing:.12em}
.ec-piece figcaption span{opacity:.55}.ec-piece figcaption strong{font-weight:500}
.ec-piece--hero{grid-column:1 / 9}.ec-piece--hero .ec-media{aspect-ratio:4/3}
.ec-module--quote{grid-column:9 / 13;min-height:100%;background:var(--acid);position:relative;overflow:hidden;padding:clamp(24px,4vw,58px)}
.ec-module-index{font-size:9px;letter-spacing:.13em;position:relative;z-index:2}
.ec-module--quote p{position:relative;z-index:2;font-size:clamp(38px,5vw,76px);line-height:.82;letter-spacing:-.06em;margin:24% 0 0}.ec-module--quote em{font-family:'DM Serif Display',Georgia,serif}
.ec-orbit{position:absolute;border:2px solid rgba(17,16,15,.35);border-radius:50%;animation:spin 13s linear infinite}.ec-orbit--a{width:72%;aspect-ratio:1;right:-26%;top:14%}.ec-orbit--b{width:42%;aspect-ratio:1;left:-15%;bottom:-12%;animation-direction:reverse;animation-duration:9s}
.ec-piece--split{grid-column:1 / 6}.ec-piece--split .ec-media{aspect-ratio:4/3}
.ec-module--statement{grid-column:6 / 9;min-height:100%;background:var(--ink);color:#fff;padding:clamp(24px,3vw,48px);position:relative;overflow:hidden}
.ec-module--statement h2{font-size:clamp(36px,4.3vw,66px);line-height:.88;letter-spacing:-.065em;margin:28% 0 0;font-weight:500;position:relative;z-index:2}.ec-module--statement h2 span{font-family:'DM Serif Display',Georgia,serif;font-weight:400}
.ec-scribble{position:absolute;width:150%;aspect-ratio:1;right:-55%;bottom:-38%;border:4px solid var(--acid);border-radius:48% 52% 44% 56%;transform:rotate(18deg);opacity:.9}
.ec-piece--social{grid-column:9 / 13}.ec-piece--social .ec-media{aspect-ratio:4/3}
.ec-piece--billboard{grid-column:1 / 13;margin-top:2vw}.ec-piece--billboard .ec-media{aspect-ratio:16/7}.ec-piece--billboard img{object-position:center 48%}
.ec-module--palette{grid-column:1 / 5;background:#eee8e3;min-height:300px;padding:clamp(22px,3vw,44px);display:flex;flex-direction:column;justify-content:space-between}
.ec-palette{display:grid;grid-template-columns:repeat(5,1fr);height:42%;gap:4px}.ec-palette i:nth-child(1){background:var(--ink)}.ec-palette i:nth-child(2){background:var(--acid)}.ec-palette i:nth-child(3){background:var(--violet)}.ec-palette i:nth-child(4){background:var(--blue)}.ec-palette i:nth-child(5){background:var(--orange)}
.ec-palette-meta{display:flex;justify-content:space-between;gap:12px;font-size:8px;letter-spacing:.1em}
.ec-end{padding:20px clamp(22px,4vw,64px) 80px}.ec-end-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:10vw;padding:7vw 0}.ec-end h2{font-size:clamp(58px,10vw,150px);line-height:.8;letter-spacing:-.07em;margin:0}.ec-end h2 em{font-family:'DM Serif Display',Georgia,serif;font-weight:400}.ec-end p{align-self:end;max-width:390px;font-size:15px;line-height:1.5}.ec-end-home{border:1px solid rgba(17,16,15,.5);background:transparent;border-radius:999px;padding:12px 17px;font-size:10px;letter-spacing:.12em;cursor:pointer;transition:background .3s ease,color .3s ease}.ec-end-home:hover{background:var(--ink);color:var(--paper)}
.ec-modal{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;padding:20px}.ec-modal.is-open{display:flex}.ec-modal-backdrop{position:absolute;inset:0;background:rgba(12,12,12,.42);backdrop-filter:blur(18px)}
.ec-modal-card{position:relative;z-index:2;width:min(430px,100%);background:#f2eeeb;color:var(--ink);padding:42px;border-radius:24px;box-shadow:0 30px 90px rgba(0,0,0,.25);animation:modalIn .55s var(--ease) both}.ec-modal-close{position:absolute;right:18px;top:16px;border:0;background:none;font-size:28px;line-height:1;cursor:pointer}.ec-modal-label{font-size:9px;letter-spacing:.14em;opacity:.55}.ec-modal-card h2{font-size:40px;letter-spacing:-.055em;margin:22px 0 8px}.ec-modal-card p{font-size:13px;opacity:.62;margin:0 0 26px}.ec-modal-card form{display:flex;border-bottom:1px solid rgba(17,16,15,.55)}.ec-modal-card input{min-width:0;flex:1;border:0;background:transparent;padding:12px 0;outline:0;font-size:17px}.ec-modal-card form button{border:0;background:none;padding:12px 0 12px 15px;font-size:10px;letter-spacing:.12em;cursor:pointer}.ec-error{display:block;min-height:15px;margin-top:14px;font-size:10px;color:#e25f43;opacity:0}.ec-error.is-visible{opacity:1}
.ec-reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}.ec-reveal.is-visible{opacity:1;transform:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes modalIn{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
@media(max-width:820px){
.ec-gate{min-height:620px}.ec-gate-title{font-size:clamp(48px,15vw,100px);bottom:105px}.ec-gate-note{left:22px;right:auto;bottom:38px;max-width:150px}.ec-enter{right:22px;bottom:35px}
.ec-intro-grid,.ec-end-grid{grid-template-columns:1fr;gap:40px}.ec-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}.ec-piece--hero{grid-column:1 / 7}.ec-module--quote{grid-column:1 / 7;min-height:430px}.ec-piece--split{grid-column:1 / 4}.ec-module--statement{grid-column:4 / 7}.ec-piece--social{grid-column:1 / 4}.ec-module--palette{grid-column:4 / 7}.ec-piece--billboard{grid-column:1 / 7}
}
@media(max-width:560px){
.ec-header{height:58px}.ec-header-meta{gap:12px}.ec-gate{min-height:580px}.ec-gate-content{padding-top:76px}.ec-lock{width:62px;height:62px}.ec-lock-shackle{left:20px;top:15px}.ec-lock-body{left:17px;top:31px}.ec-gate-title{font-size:clamp(45px,14vw,76px);bottom:100px}.ec-gate-title span:last-child{margin-left:34px}.ec-gate-note{font-size:8px;bottom:27px}.ec-enter{bottom:24px;padding:10px 13px;font-size:8px}
.ec-project-intro{padding-top:95px}.ec-label{font-size:8px}.ec-intro-grid h1{font-size:clamp(50px,16vw,86px)}.ec-intro-copy{font-size:14px}.ec-grid{grid-template-columns:1fr 1fr;gap:10px;padding-bottom:75px}.ec-piece--hero,.ec-piece--billboard{grid-column:1 / 3}.ec-module--quote{grid-column:1 / 3;min-height:340px}.ec-piece--split{grid-column:1 / 3}.ec-module--statement{grid-column:1 / 3;min-height:330px}.ec-piece--social{grid-column:1 / 3}.ec-module--palette{grid-column:1 / 3;min-height:220px}.ec-piece figcaption{font-size:7px}.ec-end{padding-bottom:55px}.ec-modal-card{padding:34px 26px;border-radius:20px}.ec-modal-card h2{font-size:34px}
}
@media(prefers-reduced-motion:reduce){.ec-piece img,.ec-reveal,.ec-lock,.ec-orbit{transition:none;animation:none}.ec-reveal{opacity:1;transform:none}}


/* Shared fixed project navigation — consistent with the portfolio index */
.global-project-tools{position:relative;z-index:200}
.global-project-footer{position:fixed!important;left:0!important;right:0!important;bottom:14px!important;z-index:190!important;display:flex!important;justify-content:center!important;align-items:center!important;width:100%!important;margin:0!important;padding:0 24px!important;background:transparent!important;color:rgba(16,16,16,.68)!important;font-size:10px!important;line-height:1!important;letter-spacing:.08em!important;pointer-events:none!important;text-transform:none!important}
.global-project-footer span{display:block;white-space:nowrap;text-align:center;opacity:.9}
.global-project-back-top{position:fixed;right:28px;bottom:27px;z-index:195;width:38px;height:38px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(16,16,16,.34);border-radius:50%;background:rgba(255,255,255,.18);color:rgba(16,16,16,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font-size:18px;font-weight:300;line-height:1;cursor:pointer;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .35s ease,visibility .35s ease,transform .45s cubic-bezier(.16,1,.3,1),background .3s ease}
.global-project-back-top.is-visible{opacity:.78;visibility:visible;transform:translateY(0)}
.global-project-back-top:hover{opacity:1;background:rgba(255,255,255,.48);transform:translateY(-3px)}
.global-project-end{display:flex;justify-content:flex-start;padding:0 clamp(22px,4vw,64px) 90px}
.global-project-end-home{border:1px solid currentColor;border-radius:999px;background:transparent;color:inherit;padding:12px 17px;font:inherit;font-size:10px;letter-spacing:.12em;cursor:pointer;transition:background .3s ease,color .3s ease,transform .35s ease}
.global-project-end-home:hover{transform:translateY(-2px)}
@media(max-width:720px){.global-project-footer{bottom:10px!important;font-size:9px!important}.global-project-back-top{right:18px;bottom:18px;width:34px;height:34px;font-size:16px}.global-project-end{padding-bottom:72px}}

/* Private case study polish: restrained editorial motion */
.ec-gate-media img{transform:scale(1.04);transition:transform 1.6s cubic-bezier(.16,1,.3,1),filter 1.2s ease}
.ec-gate:hover .ec-gate-media img{transform:scale(1.09)}
.ec-gate-overlay{background:linear-gradient(135deg,rgba(60,78,115,.28),rgba(215,226,245,.12) 50%,rgba(17,16,15,.18))}
.ec-lock{box-shadow:0 0 0 0 rgba(255,255,255,.18);animation:ecLockBreathe 4.5s ease-in-out infinite}
.ec-lock:hover{animation-play-state:paused}
.ec-piece .ec-media{border-radius:2px}
.ec-piece:hover img{transform:scale(1.045) rotate(.15deg)}
.ec-module--quote,.ec-module--statement,.ec-module--palette{transition:transform .7s cubic-bezier(.16,1,.3,1),box-shadow .7s ease}
.ec-module--quote:hover,.ec-module--statement:hover,.ec-module--palette:hover{transform:translateY(-4px);box-shadow:0 18px 48px rgba(17,16,15,.09)}
.ec-end-home{transition:transform .35s ease,background .3s ease,color .3s ease}
.ec-end-home:hover{transform:translateY(-2px)}
@keyframes ecLockBreathe{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}50%{box-shadow:0 0 0 8px rgba(255,255,255,.055)}}

/* Supplied key visual + typography/palette reference: refined editorial hover treatment */
.ec-piece--hero .ec-media{background:var(--paper);}
.ec-piece--hero img{object-fit:contain;}
.ec-piece--split .ec-media{background:#e0d8d5;box-shadow:0 0 0 1px rgba(17,16,15,.07);}
.ec-piece--split img{object-fit:contain;transform-origin:center;will-change:transform;transition:transform 1s cubic-bezier(.16,1,.3,1),filter .8s ease;}
.ec-piece--split:hover .ec-media{box-shadow:0 20px 55px rgba(17,16,15,.13);}
.ec-piece--split:hover img{filter:saturate(1.08) contrast(1.015);}
.ec-piece--split figcaption strong{transition:letter-spacing .45s ease,color .45s ease;}
.ec-piece--split:hover figcaption strong{letter-spacing:.17em;color:var(--blue);}
.ec-piece--hero:hover img{filter:saturate(1.06);}
.ec-palette i{transform-origin:bottom;transition:transform .55s cubic-bezier(.16,1,.3,1),filter .45s ease;border-radius:2px;}
.ec-palette:hover i:nth-child(odd){transform:scaleY(1.08);filter:saturate(1.18);}
.ec-palette:hover i:nth-child(even){transform:scaleY(.92);filter:saturate(1.2);}
.ec-palette-meta span{transition:letter-spacing .4s ease,opacity .4s ease;}
.ec-module--palette:hover .ec-palette-meta span{letter-spacing:.16em;opacity:1;}
@media(prefers-reduced-motion:reduce){.ec-piece--split img,.ec-palette i,.ec-palette-meta span{transition:none!important;}}
.ec-piece--hero .ec-media{aspect-ratio:16/9;}
.ec-piece--split .ec-media{aspect-ratio:16/9;}


/* Creative statement module — expressive, kinetic and aligned with the supplied key visual */
.ec-module--statement{background:var(--blue);color:var(--ink);isolation:isolate;min-height:430px;display:flex;flex-direction:column;justify-content:space-between;border-radius:2px;transition:background .6s ease,transform .7s cubic-bezier(.16,1,.3,1),box-shadow .7s ease}
.ec-module--statement .ec-module-index{font-size:9px;letter-spacing:.17em;text-transform:uppercase}
.ec-module--statement h2{margin:0 0 auto;padding-top:clamp(46px,7vw,94px);font-size:clamp(42px,5vw,76px);line-height:.82;letter-spacing:-.075em;font-weight:600;z-index:3}
.ec-module--statement h2 span{display:inline-block;color:var(--paper);font-family:'DM Serif Display',Georgia,serif;font-style:italic;font-weight:400;transform:rotate(-5deg);transform-origin:left center;transition:transform .65s cubic-bezier(.16,1,.3,1),color .45s ease}
.ec-statement-note{position:relative;z-index:3;max-width:220px;margin:32px 0 0;font-size:12px;line-height:1.35;letter-spacing:-.015em}
.ec-scribble{width:125%;right:-32%;bottom:-26%;border:clamp(5px,.7vw,10px) solid var(--acid);border-radius:49% 51% 43% 57%;transform:rotate(-18deg);opacity:1;animation:ecScribbleFloat 8s ease-in-out infinite;transition:border-color .5s ease,transform .7s cubic-bezier(.16,1,.3,1)}
.ec-module--statement:hover{background:var(--orange);transform:translateY(-7px) rotate(-.35deg);box-shadow:0 24px 55px rgba(17,16,15,.14)}
.ec-module--statement:hover h2 span{transform:rotate(3deg) translateX(8px);color:var(--ink)}
.ec-module--statement:hover .ec-scribble{border-color:var(--violet);transform:rotate(7deg) scale(1.05)}
.ec-module--statement:hover .ec-statement-note{letter-spacing:.015em}
.ec-statement-note{transition:letter-spacing .4s ease}
@keyframes ecScribbleFloat{0%,100%{transform:rotate(-18deg) translate3d(0,0,0)}50%{transform:rotate(-10deg) translate3d(-3%, -3%,0)}}
@media(max-width:820px){.ec-module--statement{min-height:380px}}
@media(max-width:560px){.ec-module--statement{min-height:320px}.ec-module--statement h2{padding-top:58px;font-size:clamp(48px,14vw,72px)}.ec-statement-note{max-width:190px}}
@media(prefers-reduced-motion:reduce){.ec-scribble{animation:none!important}.ec-module--statement,.ec-module--statement h2 span,.ec-statement-note{transition:none!important}}

/* Use the portfolio-wide animated circular cursor inside project frames. */
html, body, body *, body *::before, body *::after { cursor: none !important; }
@media (hover:none), (pointer:coarse) { html, body, body *, body *::before, body *::after { cursor: auto !important; } }

/* Requested refinement: full-screen OOH opening and less visual microcopy. */
.ec-project-intro .ec-label, .ec-piece figcaption, .ec-module-index, .ec-palette-meta, .ec-statement-note, .ec-muted { display:none !important; }
.ec-ooh-opening { grid-column:1 / -1 !important; width:100%; margin:0 0 clamp(42px,7vw,100px) !important; }
.ec-ooh-opening .ec-media { width:100%; height:100svh; min-height:560px; aspect-ratio:auto !important; border-radius:0 !important; background:var(--paper); }
.ec-ooh-opening img { width:100%; height:100% !important; object-fit:cover !important; object-position:center; }
.ec-ooh-opening:hover img { transform:scale(1.018); }
.ec-project-intro { padding-top:clamp(48px,7vw,90px); }
@media(max-width:820px){ .ec-ooh-opening .ec-media { height:100svh; min-height:520px; } }

/* V5 — Full-screen editorial sequence for Ejercicio Creativo */
:root{--paper:#ded6d3;--ink:#10100f;--acid:#e3ff32;--violet:#bfa2e4;--blue:#347be8;--orange:#f66b25;--ease:cubic-bezier(.16,1,.3,1)}
html,body{background:var(--paper);scroll-behavior:smooth}
.ec-project{display:block!important;padding:0!important}
.ec-ooh-screen,.ec-intro-screen,.ec-system-screen,.ec-mockup-screen,.ec-closing-screen{position:relative;min-height:100svh;overflow:hidden;isolation:isolate}
.ec-ooh-screen{height:100svh;min-height:580px;background:#d8d0cb;color:#fff}
.ec-ooh-media{position:absolute;inset:0;overflow:hidden;background:var(--paper)}
.ec-ooh-media img{width:100%;height:100%;object-fit:cover;object-position:center;transition:transform 1.5s var(--ease),filter 1s ease;will-change:transform}
.ec-ooh-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.10),transparent 30%,rgba(0,0,0,.30));opacity:.35;transition:opacity .8s ease;pointer-events:none}
.ec-ooh-hover{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(86px,10vh,112px) clamp(22px,5vw,76px) 34px;opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .9s var(--ease);pointer-events:none}
.ec-ooh-screen:hover .ec-ooh-hover,.ec-ooh-screen:focus-within .ec-ooh-hover{opacity:1;transform:none}
.ec-ooh-screen:hover .ec-ooh-shade,.ec-ooh-screen:focus-within .ec-ooh-shade{opacity:1}
.ec-ooh-screen:hover .ec-ooh-media img{transform:scale(1.035)}
.ec-ooh-tag,.ec-ooh-bottom{display:flex;justify-content:space-between;gap:20px;font-size:10px;letter-spacing:.15em;text-transform:uppercase}
.ec-ooh-hover h1{margin:auto 0;font-size:clamp(70px,13vw,190px);line-height:.75;letter-spacing:-.085em;font-weight:600;text-shadow:0 8px 50px rgba(0,0,0,.08)}
.ec-ooh-hover h1 em{font-family:'DM Serif Display',Georgia,serif;font-weight:400;margin-left:clamp(20px,9vw,150px)}
.ec-ooh-bottom b{display:inline-block;font-size:18px;margin-left:10px;transition:transform .35s ease}.ec-ooh-screen:hover .ec-ooh-bottom b{transform:translate(4px,-4px)}
.ec-ooh-hint{position:absolute;right:clamp(22px,5vw,76px);bottom:34px;color:var(--ink);font-size:9px;letter-spacing:.14em;transition:opacity .3s ease}.ec-ooh-hint span{margin-left:10px}.ec-ooh-screen:hover .ec-ooh-hint{opacity:0}
.ec-intro-screen{background:var(--acid);padding:clamp(84px,9vh,112px) clamp(22px,5vw,76px) 50px;display:flex;flex-direction:column;justify-content:space-between;color:var(--ink)}
.ec-intro-top{display:flex;justify-content:space-between;font-size:10px;letter-spacing:.15em;position:relative;z-index:2}
.ec-intro-content{position:relative;z-index:2;max-width:1100px;margin:auto 0;padding:7vh 0}
.ec-intro-overline{font-size:clamp(15px,2vw,24px);margin:0 0 18px;letter-spacing:-.03em}
.ec-intro-content h2{font-size:clamp(76px,15vw,220px);line-height:.72;letter-spacing:-.095em;margin:0;font-weight:600;transition:letter-spacing .6s var(--ease)}
.ec-intro-content h2 em{font-family:'DM Serif Display',Georgia,serif;font-weight:400;color:var(--blue);transition:color .5s ease}
.ec-intro-screen:hover .ec-intro-content h2{letter-spacing:-.07em}.ec-intro-screen:hover .ec-intro-content h2 em{color:var(--orange)}
.ec-intro-copy{max-width:430px;margin:36px 0 0 auto;font-size:clamp(14px,1.3vw,18px);line-height:1.45}
.ec-intro-orbit{position:absolute;border:clamp(5px,.8vw,12px) solid var(--blue);border-radius:50%;pointer-events:none;transition:transform 1s var(--ease),border-color .5s ease}.orbit-one{width:38vw;aspect-ratio:1;right:-7vw;top:16%;}.orbit-two{width:24vw;aspect-ratio:1;right:9vw;top:35%;border-color:var(--orange)}
.ec-intro-screen:hover .orbit-one{transform:rotate(26deg) scale(1.08);border-color:var(--violet)}.ec-intro-screen:hover .orbit-two{transform:rotate(-24deg) scale(.9);border-color:var(--ink)}
.ec-intro-stamp{position:absolute;left:5vw;bottom:7vh;width:100px;height:100px;border-radius:50%;background:var(--violet);display:grid;place-content:center;text-align:center;font-size:10px;letter-spacing:.1em;line-height:1.15;transform:rotate(-12deg);transition:transform .6s var(--ease)}.ec-intro-screen:hover .ec-intro-stamp{transform:rotate(0) scale(1.1)}
.ec-system-screen{background:var(--paper);padding:clamp(82px,9vh,110px) clamp(18px,3vw,46px) 36px;display:flex;flex-direction:column;justify-content:space-between}
.ec-system-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;position:relative;z-index:2}.ec-system-heading>span{font-size:10px;letter-spacing:.15em}.ec-system-heading p{margin:0;text-align:right;font-size:clamp(28px,4vw,58px);line-height:.9;letter-spacing:-.06em}.ec-system-heading em{font-family:'DM Serif Display',Georgia,serif;font-weight:400;color:var(--blue)}
.ec-system-art{position:relative;flex:1;min-height:0;margin:24px 0;overflow:hidden;display:flex;align-items:center;justify-content:center}.ec-system-art img{width:100%;height:100%;max-height:calc(100svh - 220px);object-fit:contain;transition:transform 1.2s var(--ease),filter .8s ease;will-change:transform}.ec-system-screen:hover .ec-system-art img{transform:scale(1.025);filter:saturate(1.12)}
.ec-system-orb{position:absolute;right:7%;top:33%;width:clamp(58px,8vw,110px);aspect-ratio:1;border-radius:50%;background:conic-gradient(var(--blue),var(--acid),var(--orange),var(--violet),var(--blue));display:grid;place-content:center;font-family:'DM Serif Display',Georgia,serif;font-size:clamp(23px,3vw,42px);animation:ecOrb 12s linear infinite;box-shadow:0 10px 40px #10101012}.ec-system-orb span{position:absolute;right:-6px;top:-12px;font:22px 'DM Sans',sans-serif;transition:transform .5s ease}.ec-system-screen:hover .ec-system-orb span{transform:rotate(75deg) scale(1.3)}
.ec-system-bottom{display:flex;justify-content:space-between;gap:12px;border-top:1px solid #10101055;padding-top:12px;font-size:9px;letter-spacing:.15em}
.ec-mockup-screen{display:grid;grid-template-columns:.75fr 1.25fr;gap:clamp(20px,5vw,80px);align-items:center;padding:clamp(86px,10vh,120px) clamp(22px,5vw,76px);background:var(--blue);color:#fff}.ec-mockup-screen--two{grid-template-columns:1.2fr .8fr;background:var(--orange);color:var(--ink)}
.ec-mockup-copy{position:relative;z-index:2}.ec-mockup-copy>span{font-size:10px;letter-spacing:.15em}.ec-mockup-copy h2{font-size:clamp(48px,7.4vw,110px);line-height:.8;letter-spacing:-.075em;margin:8vh 0 28px;font-weight:600}.ec-mockup-copy h2 em{font-family:'DM Serif Display',Georgia,serif;font-weight:400;color:var(--acid)}.ec-mockup-screen--two .ec-mockup-copy h2 em{color:var(--violet)}.ec-mockup-copy p{max-width:310px;font-size:15px;line-height:1.5}
.ec-mockup-image{margin:0;position:relative;overflow:hidden;background:var(--paper);box-shadow:0 24px 70px #0002;transform:rotate(1.5deg);transition:transform .9s var(--ease),box-shadow .8s ease}.ec-mockup-screen--two .ec-mockup-image{transform:rotate(-1.5deg)}.ec-mockup-image img{width:100%;height:auto;aspect-ratio:1500/844;object-fit:cover;transition:transform 1.2s var(--ease),filter .8s ease}.ec-mockup-image:hover{transform:rotate(0) scale(1.015);box-shadow:0 34px 90px #0003}.ec-mockup-image:hover img{transform:scale(1.04);filter:saturate(1.1)}
.ec-floating-star{position:absolute;left:48%;top:14%;font-size:clamp(40px,8vw,110px);color:var(--acid);animation:ecStarFloat 6s ease-in-out infinite;pointer-events:none}.ec-color-dots{display:flex;gap:10px;margin-top:34px}.ec-color-dots i{display:block;width:clamp(22px,3vw,42px);aspect-ratio:1;border-radius:50%;background:var(--ink);transition:transform .5s var(--ease)}.ec-color-dots i:nth-child(2){background:var(--acid)}.ec-color-dots i:nth-child(3){background:var(--violet)}.ec-color-dots i:nth-child(4){background:var(--blue)}.ec-color-dots i:nth-child(5){background:var(--paper)}.ec-mockup-screen--two:hover .ec-color-dots i:nth-child(odd){transform:translateY(-7px)}.ec-mockup-screen--two:hover .ec-color-dots i:nth-child(even){transform:translateY(7px)}
.ec-closing-screen{background:var(--ink);color:var(--paper);display:flex;flex-direction:column;justify-content:center;padding:clamp(90px,12vh,140px) clamp(22px,7vw,110px);min-height:100svh}.ec-closing-label{font-size:10px;letter-spacing:.16em;position:relative;z-index:2}.ec-closing-screen h2{position:relative;z-index:2;font-size:clamp(82px,17vw,245px);line-height:.69;letter-spacing:-.095em;margin:7vh 0 4vh;font-weight:500;transition:transform .8s var(--ease)}.ec-closing-screen h2 em{font-family:'DM Serif Display',Georgia,serif;font-weight:400;color:var(--acid)}.ec-closing-screen:hover h2{transform:translateX(1.5vw)}.ec-closing-screen p{position:relative;z-index:2;max-width:420px;font-size:clamp(15px,1.5vw,20px);line-height:1.45;margin:0 0 38px auto}.ec-closing-screen .ec-end-home{position:relative;z-index:3;align-self:flex-start;border-color:#ded6d388;color:var(--paper)}.ec-closing-screen .ec-end-home:hover{background:var(--paper);color:var(--ink)}.ec-closing-year{position:absolute;right:5vw;bottom:6vh;color:var(--acid);font-size:11px;letter-spacing:.18em}.ec-closing-ring{position:absolute;border:clamp(5px,.8vw,12px) solid var(--blue);border-radius:50%;pointer-events:none;transition:transform 1.1s var(--ease),border-color .6s ease}.ring-a{width:40vw;aspect-ratio:1;right:-8vw;top:12vh}.ring-b{width:22vw;aspect-ratio:1;right:15vw;top:30vh;border-color:var(--orange)}.ec-closing-screen:hover .ring-a{transform:rotate(22deg) scale(1.08);border-color:var(--violet)}.ec-closing-screen:hover .ring-b{transform:rotate(-30deg);border-color:var(--acid)}
@keyframes ecOrb{to{transform:rotate(360deg)}}@keyframes ecStarFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-16px) rotate(22deg)}}
@media(max-width:760px){.ec-ooh-hover{padding-top:90px}.ec-ooh-hover h1{font-size:clamp(62px,15vw,110px)}.ec-intro-copy{margin:30px 0 0;max-width:360px}.ec-intro-stamp{width:72px;height:72px;bottom:4vh;font-size:8px}.orbit-one{width:58vw;right:-18vw}.orbit-two{width:34vw;right:8vw}.ec-system-heading{align-items:flex-start}.ec-system-heading p{font-size:clamp(25px,6vw,40px)}.ec-system-art img{object-fit:contain}.ec-system-orb{right:4%;top:40%}.ec-system-bottom{font-size:7px}.ec-mockup-screen,.ec-mockup-screen--two{grid-template-columns:1fr;gap:30px;padding-top:95px;padding-bottom:80px}.ec-mockup-screen--two .ec-mockup-image{order:2}.ec-mockup-copy h2{margin:5vh 0 22px}.ec-floating-star{left:auto;right:8%;top:8%}.ec-closing-screen h2{font-size:clamp(76px,18vw,135px)}.ec-closing-screen p{margin-left:0}.ring-a{width:65vw;right:-28vw}.ring-b{width:36vw;right:9vw}}
@media(hover:none){.ec-ooh-hover{opacity:1;transform:none}.ec-ooh-shade{opacity:.72}.ec-ooh-hint{display:none}}
@media(prefers-reduced-motion:reduce){.ec-ooh-media img,.ec-ooh-hover,.ec-intro-content h2,.ec-intro-content h2 em,.ec-intro-orbit,.ec-intro-stamp,.ec-system-art img,.ec-system-orb,.ec-mockup-image,.ec-mockup-image img,.ec-closing-screen h2,.ec-closing-ring,.ec-floating-star{animation:none!important;transition:none!important}.ec-reveal{opacity:1;transform:none}}

/* V6 — Creative Jam 2026: vibrant editorial rhythm and tactile mockups */
.ec-ooh-screen{background:#ded6d3;color:#fff}
.ec-ooh-media img{object-position:center 52%;filter:saturate(.98);}
.ec-ooh-shade{background:linear-gradient(180deg,rgba(16,16,15,.12),transparent 25%,rgba(16,16,15,.48));opacity:.58}
.ec-ooh-hover{padding:clamp(92px,11vh,124px) clamp(22px,5vw,76px) 36px}
.ec-ooh-tag{align-items:center}
.ec-ooh-tag span:first-child{border:1px solid rgba(255,255,255,.75);border-radius:999px;padding:10px 14px;background:rgba(20,20,20,.12);backdrop-filter:blur(10px)}
.ec-ooh-hover h1{font-size:clamp(74px,13.5vw,202px);line-height:.76;letter-spacing:-.09em;font-weight:500;max-width:1000px}
.ec-ooh-hover h1 em{color:var(--acid);text-shadow:0 4px 28px rgba(0,0,0,.1)}
.ec-ooh-bottom{align-items:center;text-shadow:0 2px 14px #0005}
.ec-ooh-screen:hover .ec-ooh-media img{transform:scale(1.045);filter:saturate(1.08)}
.ec-ooh-screen:hover .ec-ooh-hover h1{animation:jamTitleIn .75s var(--ease) both}
@keyframes jamTitleIn{from{opacity:.3;transform:translateY(20px);letter-spacing:-.12em}to{opacity:1;transform:translateY(0);letter-spacing:-.09em}}
.ec-intro-screen{background:#ded6d3;min-height:100svh}
.ec-intro-content h2{max-width:1000px;font-size:clamp(78px,15.5vw,228px)}
.ec-intro-content h2 em{color:var(--orange);display:inline-block;transition:transform .7s var(--ease),color .5s ease}
.ec-intro-screen:hover .ec-intro-content h2 em{transform:rotate(-8deg) translateY(-.035em);color:var(--blue)}
.ec-intro-copy{position:relative;z-index:3;max-width:470px;margin:34px 3vw 0 auto}
.ec-intro-words{display:flex;flex-wrap:wrap;gap:9px;margin:28px 0 0 auto;max-width:470px;position:relative;z-index:3}
.ec-intro-words span{display:inline-flex;border:1px solid rgba(16,16,15,.55);border-radius:999px;padding:9px 13px;font-size:10px;letter-spacing:.12em;transition:background .4s ease,color .4s ease,transform .6s var(--ease)}
.ec-intro-words span:nth-child(2){background:var(--violet)}.ec-intro-words span:nth-child(3){background:var(--acid)}
.ec-intro-words span:hover{background:var(--ink);color:var(--paper);transform:translateY(-7px) rotate(-3deg) scale(1.05)}
.ec-intro-spark{position:absolute;font-size:clamp(36px,6vw,84px);color:var(--orange);animation:ecStarFloat 5s ease-in-out infinite;pointer-events:none}
.spark-one{left:48%;top:22%}.spark-two{right:8%;bottom:15%;color:var(--blue);animation-delay:-2s}
.ec-intro-stamp{z-index:3}
.ec-system-screen{min-height:100svh;height:100svh;padding:clamp(82px,9vh,108px) clamp(18px,3vw,46px) 26px;background:#171515;color:#f8f0eb}
.ec-system-heading p{font-size:clamp(32px,4.5vw,66px)}
.ec-system-heading em{color:var(--acid)}
.ec-system-art{margin:14px 0 18px;flex:1}
.ec-system-art img{max-height:calc(100svh - 230px);object-fit:contain;mix-blend-mode:normal}
.ec-system-orb{z-index:2;right:5%;top:30%;color:#111;background:conic-gradient(var(--blue),var(--acid),var(--orange),var(--violet),var(--blue));transition:transform .6s var(--ease)}
.ec-system-screen:hover .ec-system-orb{transform:scale(1.12) rotate(14deg)}
.ec-live-palette{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;height:clamp(56px,9vh,90px);position:relative;z-index:4}
.ec-live-palette button{position:relative;overflow:hidden;border:0;background:var(--swatch);padding:0;min-width:0;cursor:none;transition:transform .5s var(--ease),border-radius .5s var(--ease),filter .5s ease}
.ec-live-palette button span{position:absolute;left:12px;bottom:10px;color:white;font-size:9px;letter-spacing:.12em;opacity:0;transform:translateY(8px);transition:opacity .3s ease,transform .4s var(--ease)}
.ec-live-palette button:first-child span{color:#fff}
.ec-live-palette button:hover,.ec-live-palette button.is-active{transform:translateY(-8px) scale(1.025);border-radius:12px;filter:saturate(1.18);box-shadow:0 10px 24px #0004}
.ec-live-palette button:hover span,.ec-live-palette button.is-active span{opacity:1;transform:none}
.ec-mockup-screen{min-height:100svh;padding-top:clamp(90px,11vh,140px);padding-bottom:clamp(80px,10vh,120px)}
.ec-mockup-screen--one{background:var(--blue);color:#fff}
.ec-mockup-screen--two{background:var(--violet);color:var(--ink)}
.ec-mockup-copy h2{font-size:clamp(48px,7.6vw,116px);line-height:.82}
.ec-mockup-copy h2 em{color:var(--acid);transition:color .5s ease,letter-spacing .5s ease}
.ec-mockup-screen--two .ec-mockup-copy h2 em{color:var(--orange)}
.ec-mockup-screen:hover .ec-mockup-copy h2 em{color:#fff;letter-spacing:-.045em}
.ec-mockup-image{border:1px solid rgba(255,255,255,.45);border-radius:3px;transform:rotate(1.2deg);background:var(--paper)}
.ec-mockup-screen--two .ec-mockup-image{transform:rotate(-1.4deg)}
.ec-mockup-image img{aspect-ratio:3/2;object-fit:cover}
.ec-mockup-screen--one .ec-mockup-image img{object-position:center}
.ec-mockup-screen--two .ec-mockup-image img{aspect-ratio:4/3;object-position:center}
.ec-mockup-keywords{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.ec-mockup-keywords span{font-size:9px;letter-spacing:.1em;padding:8px 11px;border:1px solid currentColor;border-radius:999px;transition:transform .4s var(--ease),background .4s ease,color .4s ease}
.ec-mockup-keywords span:nth-child(2){background:var(--acid);color:var(--ink);border-color:var(--acid)}
.ec-mockup-keywords span:hover{transform:translateY(-5px) rotate(-3deg);background:var(--ink);color:var(--paper);border-color:var(--ink)}
.ec-closing-screen{background:var(--paper);color:var(--ink);min-height:100svh}
.ec-closing-screen h2{font-size:clamp(74px,14.8vw,218px);line-height:.76}
.ec-closing-screen h2 em{color:var(--blue)}
.ec-closing-screen p{max-width:430px}
.ec-closing-screen .ec-end-home{border-color:rgba(16,16,15,.55);color:var(--ink)}
.ec-closing-screen .ec-end-home:hover{background:var(--ink);color:var(--paper)}
.ec-closing-year{color:var(--orange)}
.ring-a{border-color:var(--acid)}.ring-b{border-color:var(--violet)}
.ec-closing-screen:hover .ring-a{border-color:var(--blue)}.ec-closing-screen:hover .ring-b{border-color:var(--orange)}
@media(max-width:760px){
 .ec-ooh-hover h1{font-size:clamp(58px,14.5vw,112px)}
 .ec-intro-content h2{font-size:clamp(72px,17vw,136px)}
 .ec-intro-copy,.ec-intro-words{margin-left:0;margin-right:0}
 .ec-intro-spark.spark-one{left:auto;right:10%;top:20%}
 .ec-system-screen{height:auto;min-height:100svh;padding-top:88px;padding-bottom:22px}
 .ec-system-art img{max-height:none;width:100%;height:auto}
 .ec-live-palette{height:62px;gap:4px}
 .ec-live-palette button span{font-size:7px;left:5px;bottom:7px;letter-spacing:.04em}
 .ec-mockup-screen--two .ec-mockup-image{order:0}
 .ec-mockup-copy h2{font-size:clamp(48px,13vw,86px)}
 .ec-closing-screen h2{font-size:clamp(70px,17vw,130px)}
}
@media(prefers-reduced-motion:reduce){.ec-intro-spark,.ec-intro-words span,.ec-live-palette button{animation:none!important;transition:none!important}}

/* V7 — Creative Jam: full-bleed editorial case study */
.ec-ooh-screen .ec-ooh-hover,.ec-ooh-screen .ec-ooh-hint,.ec-ooh-screen .ec-ooh-shade{display:none!important}
.ec-ooh-media img{object-fit:cover;object-position:center;filter:none}
.ec-ooh-screen:hover .ec-ooh-media img{transform:none;filter:none}
.ec-intro-top span:last-child,.ec-mockup-copy>span,.ec-closing-year{display:none!important}
.jam-system{height:auto!important;min-height:100svh!important;padding:clamp(90px,10vh,130px) clamp(18px,4vw,70px) clamp(45px,7vh,80px)!important;display:flex;flex-direction:column;gap:clamp(20px,3vh,40px);background:#171615;color:#f5eee8}
.jam-system-heading{display:flex;align-items:start;justify-content:space-between;gap:24px}
.jam-system-heading>span{font-size:10px;letter-spacing:.18em;white-space:nowrap}
.jam-system-heading h2{margin:0;text-align:right;font-size:clamp(30px,4vw,70px);line-height:.95;letter-spacing:-.055em;font-weight:500}
.jam-system-heading h2 em{font-family:'DM Serif Display',Georgia,serif;color:var(--acid);font-weight:400}
.jam-type-stage{position:relative;min-height:clamp(250px,34vh,440px);border:1px solid #ffffff26;border-radius:22px;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:radial-gradient(ellipse at 70% 30%,#3b2b45 0%,#191719 60%)}
.jam-type-line{position:relative;z-index:2;white-space:nowrap;transition:transform .8s var(--ease),letter-spacing .8s ease}
.jam-type-serif{font:italic clamp(60px,10vw,170px)/.95 'DM Serif Display',Georgia,serif;letter-spacing:-.07em;color:var(--acid);animation:jamTypeFloat 7s ease-in-out infinite}
.jam-type-serif span{color:var(--violet)}
.jam-type-sans{font-size:clamp(27px,6.8vw,112px);line-height:1;letter-spacing:-.075em;font-weight:600;animation:jamTypeFloat 7s ease-in-out -3.5s infinite}
.jam-type-sans i{font-family:'DM Serif Display',Georgia,serif;color:var(--orange);font-weight:400}
.jam-type-orbit{position:absolute;right:8%;top:12%;font-size:clamp(70px,12vw,180px);color:var(--blue);animation:jamSpin 16s linear infinite;opacity:.75}
.jam-type-stage:hover .jam-type-serif{letter-spacing:-.035em;transform:translateX(-2vw)}
.jam-type-stage:hover .jam-type-sans{letter-spacing:-.04em;transform:translateX(2vw)}
.jam-palette{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.jam-swatch{min-width:0;min-height:clamp(180px,25vh,285px);border:0;border-radius:18px;background:var(--swatch);color:#171615;display:flex;flex-direction:column;align-items:start;justify-content:space-between;text-align:left;padding:clamp(12px,1.4vw,24px);transition:transform .6s var(--ease),border-radius .6s var(--ease);animation:jamSwatchRise 1s var(--ease) both}
.jam-swatch:nth-child(1){color:#fff}.jam-swatch:nth-child(2){animation-delay:.08s}.jam-swatch:nth-child(3){animation-delay:.16s}.jam-swatch:nth-child(4){animation-delay:.24s;color:#fff}.jam-swatch:nth-child(5){animation-delay:.32s}
.jam-swatch:hover,.jam-swatch:focus-visible{transform:translateY(-12px);border-radius:34px;outline:2px solid #fff;outline-offset:3px}
.jam-swatch-name{font-size:10px;letter-spacing:.14em}.jam-swatch-values{display:flex;flex-direction:column;gap:5px;overflow-wrap:anywhere}.jam-swatch-values strong{font-size:clamp(15px,1.8vw,28px)}.jam-swatch-values small{font-size:clamp(9px,.9vw,12px);letter-spacing:.01em}
.ec-mockup-screen--one,.ec-mockup-screen--two{display:flex!important;flex-direction:column;gap:0!important;min-height:200svh!important;padding:0!important;overflow:visible!important;align-items:stretch!important}
.ec-mockup-screen--one .ec-mockup-copy,.ec-mockup-screen--two .ec-mockup-copy{height:100svh;min-height:560px;display:flex;flex-direction:column;justify-content:center;padding:clamp(70px,7vw,130px) clamp(24px,6vw,110px);position:relative}
.ec-mockup-screen--one .ec-mockup-image,.ec-mockup-screen--two .ec-mockup-image{order:2!important;height:100svh;min-height:500px;width:100%;margin:0;transform:none!important;border:0;border-radius:0;box-shadow:none}
.ec-mockup-screen--one .ec-mockup-image img,.ec-mockup-screen--two .ec-mockup-image img{height:100%;width:100%;aspect-ratio:auto!important;object-fit:cover;object-position:center}
.ec-mockup-copy h2{font-size:clamp(76px,12vw,200px)!important;line-height:.82;margin:0 0 36px!important;max-width:1250px;letter-spacing:-.075em}
.ec-mockup-copy p{max-width:590px;font-size:clamp(17px,2vw,28px);line-height:1.35}
.ec-mockup-keywords{margin-top:30px}.ec-floating-star{left:auto;right:9%;top:14%;font-size:clamp(80px,16vw,220px)}
.ec-color-dots{position:absolute;right:8%;bottom:16%;display:block;width:clamp(170px,27vw,420px);height:clamp(170px,27vw,420px);pointer-events:none}
.ec-color-dots i{position:absolute;width:clamp(30px,6vw,100px);height:clamp(30px,6vw,100px);border-radius:50%;animation:jamOrbit 9s ease-in-out infinite;left:40%;top:40%}
.ec-color-dots i:nth-child(1){--x:-115%;--y:-90%;animation-delay:0s}.ec-color-dots i:nth-child(2){--x:105%;--y:-75%;animation-delay:-2s}.ec-color-dots i:nth-child(3){--x:125%;--y:110%;animation-delay:-4s}.ec-color-dots i:nth-child(4){--x:-85%;--y:130%;animation-delay:-6s}.ec-color-dots i:nth-child(5){--x:0%;--y:0%;animation-delay:-8s}
.ec-closing-screen{background:#e9dfd9;min-height:100svh;padding:clamp(100px,11vh,150px) clamp(22px,6vw,110px);justify-content:center}
.ec-closing-screen h2{font-size:clamp(78px,14vw,235px);line-height:.75;margin:4vh 0 4vh;animation:jamClosingBreathe 9s ease-in-out infinite}
.ec-closing-screen h2 em{display:inline-block;color:var(--blue);animation:jamClosingEm 6s ease-in-out infinite}
.ec-closing-screen p{max-width:740px;font-size:clamp(24px,3vw,48px);font-weight:500;line-height:1.12;letter-spacing:-.045em;margin:2vh 0 5vh auto}
.ec-closing-ring{animation:jamRingMove 16s ease-in-out infinite}.ring-b{animation-direction:reverse;animation-duration:12s}
.ec-closing-label{font-size:10px}.ec-closing-screen .ec-end-home{align-self:flex-start}
@keyframes jamTypeFloat{0%,100%{translate:0 0}50%{translate:0 -13px}}
@keyframes jamSpin{to{rotate:360deg}}
@keyframes jamSwatchRise{from{opacity:0;translate:0 35px}to{opacity:1;translate:0 0}}
@keyframes jamOrbit{0%,100%{transform:translate(var(--x),var(--y)) scale(1)}50%{transform:translate(calc(var(--x) * -0.7),calc(var(--y) * -0.7)) scale(.8)}}
@keyframes jamClosingBreathe{0%,100%{translate:0 0}50%{translate:1.5vw -8px}}
@keyframes jamClosingEm{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg) translateX(1vw)}}
@keyframes jamRingMove{0%,100%{transform:rotate(0) scale(1)}50%{transform:rotate(22deg) scale(1.14)}}
@media(max-width:760px){.ec-ooh-screen{min-height:0;height:100svh}.ec-ooh-media img{object-position:center}.jam-system{padding:85px 15px 45px!important}.jam-system-heading{display:block}.jam-system-heading h2{text-align:left;margin-top:20px;font-size:clamp(34px,8vw,55px)}.jam-type-stage{min-height:250px}.jam-type-serif{font-size:clamp(45px,12vw,85px)}.jam-type-sans{font-size:clamp(23px,6.6vw,52px)}.jam-palette{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.jam-swatch{min-height:165px;padding:14px}.jam-swatch:last-child{grid-column:1/-1;min-height:120px}.jam-swatch-values strong{font-size:19px}.jam-swatch-values small{font-size:10px}.ec-mockup-screen--one .ec-mockup-copy,.ec-mockup-screen--two .ec-mockup-copy{min-height:0;height:100svh;padding:85px 22px 45px}.ec-mockup-copy h2{font-size:clamp(59px,12vw,105px)!important}.ec-mockup-copy p{font-size:18px;max-width:350px}.ec-mockup-screen--one .ec-mockup-image,.ec-mockup-screen--two .ec-mockup-image{min-height:0;height:100svh}.ec-mockup-screen--one .ec-mockup-image img,.ec-mockup-screen--two .ec-mockup-image img{object-fit:contain;background:#ded6d3}.ec-color-dots{right:4%;bottom:4%;opacity:.8;width:140px;height:140px}.ec-color-dots i{width:36px;height:36px}.ec-closing-screen{padding:95px 22px 85px}.ec-closing-screen h2{font-size:clamp(64px,15vw,118px)}.ec-closing-screen p{font-size:clamp(24px,6vw,38px);margin-left:0}.ring-a{width:80vw;right:-40vw}.ring-b{width:48vw;right:10vw}}
@media(prefers-reduced-motion:reduce){.jam-type-line,.jam-type-orbit,.jam-swatch,.ec-color-dots i,.ec-closing-screen h2,.ec-closing-screen h2 em,.ec-closing-ring{animation:none!important;transition:none!important}}